<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Viewer Resizing Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
<link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
<style type="text/css">
.outer-container{
width:800px;
height:600px;
margin-right:20px;
border: medium gray dashed;
background-color:beige;
position:relative;
display:flex;
flex-direction:row;
}
.inner-container{
width:800px;
height:600px;
border: thin black solid;
background-color:paleturquoise;
position:absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
}
.v2-container{
display:flex;
flex-direction:row;
height:400px;
}
.narrow{
width:50px;
background-color:pink;
height:100%;
}
.wide{
width:150px;
background-color:burlywood;
height:100%;
}
.v2-container:not([data-index="1"]) .narrow{
display:none;
}
.v2-container:not([data-index="2"]) .wide{
display:none;
}
#viewer, #viewer2 {
width: 100%;
height: 100%;
}
#buttons button{
width:18em;
text-align:center;
margin:5px;
}
.layout{
display:grid;
grid-template-columns:auto 1fr;
row-gap:10px;
padding:10px;
}
.method{
border:medium gray solid;
margin:2px;
background-color:rgb(240, 240, 240)
}
.method.selected{
border:medium red solid;
background-color: lightgoldenrodyellow;
}
.options{
display:grid;
grid-template-columns: 50% 50%;
row-gap:10px;
}
</style>
</head>
<body>
<div class="layout">
<div class="outer-container">
<div class="inner-container">
<div id="viewer"></div>
</div>
</div>
<div id="controls">
<div>
Simple demo page to show viewer behavior during resizing of the container.
The viewers' container elements are styled with width and height of 100%,
with dimensions set by CSS properties on a parent element.
</div>
<h3>Pick options to test:</h3>
<p>These options apply to both of the demo viewers on the left (top and bottom).</p>
<div class="options">
<div class="method preserve-method selected" data-value="0">
<pre>preserveImageSizeOnResize: false</pre>
</div>
<div class="method preserve-method" data-value="1">
<pre>preserveImageSizeOnResize: true</pre>
</div>
<div class="method auto-method selected" data-value="1">
<pre>autoResize: true</pre>
</div>
<div class="method auto-method" data-value="0">
<pre>autoResize: false</pre>
</div>
</div>
<h3>Click to resize the viewer:</h3>
<div id="buttons">
<div>
<button>Resize width only</button>
</div>
<div>
<button>Resize height only</button>
</div>
<div>
<button>Resize with constant aspect ratio</button>
</div>
<div>
<button>Toggle resizable inner container</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var viewer = window.v1 = OpenSeadragon({
id: "viewer",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/iiif_2_0_sizes/info.json",
minZoomImageRatio: 0,
maxZoomPixelRatio: 10,
visibilityRatio:0.5,
constrainDuringPan:false,
showNavigator: true,
});
updateViewer();
var buttons=$('#buttons button').on('click',function(){
switch($(this).text()){
case 'Resize width only': resizeWidth(this); break;
case 'Resize height only': resizeHeight(this); break;
case 'Resize with constant aspect ratio': resizeBoth(this); break;
case 'Toggle resizable inner container': toggleResizable(this); break;
}
});
function updateViewer(){
viewer.preserveImageSizeOnResize = !!parseInt($('.preserve-method.selected').data('value'));
viewer.autoResize = !!parseInt($('.auto-method.selected').data('value'));
}
$('.preserve-method').on('click',function(){
$('.preserve-method').removeClass('selected');
$(this).addClass('selected');
});
$('.auto-method').on('click',function(){
$('.auto-method').removeClass('selected');
$(this).addClass('selected');
});
$('.method').on('click',updateViewer);
var container = $('.inner-container');
function resizeWidth(b){
if(container.height() !== 600) return;
if(container.width()==800){
container.width(600);
$('#buttons button').prop('disabled', true);
$(b).prop('disabled', false);
} else {
container.width(800);
$('#buttons button').prop('disabled', false);
}
}
function resizeHeight(b){
if(container.width() !== 800) return;
if(container.height()==600){
container.height(450);
$('#buttons button').prop('disabled', true);
$(b).prop('disabled', false);
} else {
container.height(600);
$('#buttons button').prop('disabled', false);
}
}
function resizeBoth(b){
if(container.height()==600){
container.width(600);
container.height(450);
$('#buttons button').prop('disabled', true);
$(b).prop('disabled', false);
} else {
container.width(800);
container.height(600);
$('#buttons button').prop('disabled', false);
}
}
function toggleResizable(b){
if(container.isResizable){
container.isResizable = false;
container.resizable('destroy');
container.width(800);
container.height(600);
$('#buttons button').prop('disabled', false);
} else {
container.isResizable = true;
// container.resizable({containment:"parent", maxWidth: 800, maxHeight: 600,});
container.resizable();
$('#buttons button').prop('disabled', true);
container.width(800);
container.height(600);
$(b).prop('disabled', false);
}
}
</script>
</body>
</html>