2015-07-03 20:19:10 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>TileSource Swapping</title>
|
|
|
|
|
<script type="text/javascript" src="../../build/openseadragon/openseadragon.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.viewer-position {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 30px;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>This is a demo of using a single image stand-in and then swapping to a full TileSource on zooming. Click the image to see it in action.</div>
|
|
|
|
|
<div id="openseadragon1" class="viewer-position"></div>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var duomoStandin = {
|
|
|
|
|
type: 'legacy-image-pyramid',
|
|
|
|
|
levels: [
|
|
|
|
|
{
|
2024-02-09 23:06:52 +03:00
|
|
|
url: 'https://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
|
2015-07-03 20:19:10 +03:00
|
|
|
width: 218,
|
|
|
|
|
height: 160
|
|
|
|
|
}
|
2024-02-09 23:06:52 +03:00
|
|
|
],
|
|
|
|
|
degrees: 30,
|
2015-07-03 20:19:10 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var duomo = {
|
|
|
|
|
Image: {
|
|
|
|
|
xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
|
2024-02-09 23:06:52 +03:00
|
|
|
Url: 'https://openseadragon.github.io/example-images/duomo/duomo_files/',
|
2015-07-03 20:19:10 +03:00
|
|
|
Format: 'jpg',
|
|
|
|
|
Overlap: '2',
|
|
|
|
|
TileSize: '256',
|
|
|
|
|
Size: {
|
|
|
|
|
Width: '13920',
|
|
|
|
|
Height: '10200'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var viewer = OpenSeadragon({
|
|
|
|
|
id: 'openseadragon1',
|
|
|
|
|
prefixUrl: '../../build/openseadragon/images/',
|
|
|
|
|
tileSources: duomoStandin,
|
|
|
|
|
minZoomImageRatio: 0.1,
|
|
|
|
|
defaultZoomLevel: 0.1,
|
2024-02-09 23:06:52 +03:00
|
|
|
zoomPerClick: 1,
|
|
|
|
|
crossOriginPolicy: 'Anonymous'
|
2015-07-03 20:19:10 +03:00
|
|
|
});
|
|
|
|
|
|
2024-02-09 23:19:40 +03:00
|
|
|
let swapped = false;
|
|
|
|
|
viewer.addHandler('canvas-click', function(event) {
|
|
|
|
|
if (event.quick && !swapped) {
|
|
|
|
|
swapped = true;
|
2015-07-03 20:19:10 +03:00
|
|
|
var standin = viewer.world.getItemAt(0);
|
|
|
|
|
var standinBounds = standin.getBounds();
|
|
|
|
|
viewer.viewport.fitBounds(standinBounds);
|
|
|
|
|
|
|
|
|
|
viewer.addTiledImage({
|
|
|
|
|
x: standinBounds.x,
|
|
|
|
|
y: standinBounds.y,
|
|
|
|
|
width: standinBounds.width,
|
|
|
|
|
tileSource: duomo,
|
|
|
|
|
index: 0, // Add the new image below the stand-in.
|
|
|
|
|
success: function(event) {
|
|
|
|
|
var fullImage = event.item;
|
2024-02-09 23:06:52 +03:00
|
|
|
// The changeover will look better if we wait for the first draw after the changeover.
|
2015-07-03 20:19:10 +03:00
|
|
|
var tileDrawnHandler = function(event) {
|
2024-01-10 20:13:00 +03:00
|
|
|
viewer.removeHandler('update-viewport', tileDrawnHandler);
|
2015-07-03 20:19:10 +03:00
|
|
|
viewer.world.removeItem(standin);
|
|
|
|
|
};
|
|
|
|
|
|
2024-01-10 20:13:00 +03:00
|
|
|
viewer.addHandler('update-viewport', tileDrawnHandler);
|
2015-07-03 20:19:10 +03:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
