Skip to main content

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

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>