Seadragon Ajax: Switching Images
Switching images is no different from opening them; just call the openDzi() method. If you don't want to show any image, you can call the close() method, but this is not required.
When you add in a way for the user to choose the image (like we've done below), you're more than halfway to building your own image gallery.
Example
Show: Blue Marble / Earth's City Lights / Carina Nebula / Orion Nebula / (none)
Source Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://seadragon.com/ajax/0.8/seadragon-min.js">
</script>
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("container");
viewer.openDzi("blue-marble.dzi");
}
function switchTo(event, dzi) {
if (dzi) {
viewer.openDzi(dzi);
} else {
viewer.close();
}
// don't let the browser handle the link
Seadragon.Utils.cancelEvent(event);
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
<style type="text/css">
#container
{
width: 500px;
height: 400px;
background-color: black;
border: 1px solid black;
color: white; /* for error messages, etc. */
}
</style>
</head>
<body>
<p>
Show:
<a href="#" onclick="switchTo(event,
'blue-marble.dzi');">Blue Marble</a>
<a href="#" onclick="switchTo(event,
'earths-city-lights.dzi');">Earth City Lights</a>
<a href="#" onclick="switchTo(event,
'carina-nebula.dzi');">Carina Nebula</a>
<a href="#" onclick="switchTo(event,
'orion-nebula.dzi');">Orion Nebula</a>
<a href="#" onclick="switchTo(event,
null);">(none)</a>
</p>
<div id="container"></div>
</body>
</html>
