Seadragon Ajax- Adding Custom Controls

The Seadragon Ajax Library provides an API for adding custom controls (images or other HTML) onto the viewer. The viewer then controls the visibility and positioning of those controls, even when going back and forth from fullpage mode. In this example, we add a text link that randomly pans and zooms.

If you would like to learn more about Seadragon.Viewer.addControls(...), please refer to the Seadragon.Viewer class reference.

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.addControl(makeControl(),
          Seadragon.ControlAnchor.TOP_RIGHT);

        viewer.openDzi("blue-marble.dzi");
      }
      
      function makeControl() {
        var control = document.createElement("a");
        var controlText = document.createTextNode("Random");
       
        control.href = "#";  // so browser shows it as link
        control.className = "control";
        control.appendChild(controlText);
       
        Seadragon.Utils.addEvent(control, "click",
          onControlClick);
         
        return control;
      }
     
      function onControlClick(event) {
        Seadragon.Utils.cancelEvent(event);  
        // don't process link
       
        if (!viewer.isOpen()) {
          return;
        }
       
        var x = Math.random();
        var y = Math.random() / viewer.source.aspectRatio;
        var z = Math.pow(2, Math.random() * 10 - 5);
        
        viewer.viewport.panTo(new Seadragon.Point(x, y));
        viewer.viewport.zoomTo(z);
        viewer.viewport.ensureVisible();
      }
      

      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. */
      }
      .overlay
      {
        font-weight: bold;
        margin-top: 4px;
        margin-right: 4px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
  </body>
 </html>