Skip to main content

Seadragon Ajax - Subscribing to Events

In this example, we are setting the text of a <div> tag based on when we've started and finished an animation.

The Seadragon Ajax Library has an event subscription model where you can register callbacks to be notified when events fire. The key methods for event subscription are Seadragon.Viewer's addEventListener and removeEventListener. You can learn about them and all of the events on the Seadragon.Viewer page in the reference documentation.

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;
      var output = null;
     
      function init() {
        viewer = new Seadragon.Viewer("container");
        output = document.getElementById("outputText");
       
        viewer.addEventListener("open", onOpen);
        
        viewer.addEventListener("animationstart",
          onAnimationStart);
         
        viewer.addEventListener("animationfinish",
          onAnimationFinish);
       

        viewer.openDzi("orion-nebula.dzi");
      }
     
      function show(msg) {
        var timeString = new Date().toLocaleTimeString();
        output.innerHTML = msg + " at " + timeString + ".";
      }
     
      function onOpen(viewer) {
        show("Image opened");
      }
     
      function onAnimationStart(viewer) {
        show("Animation started");
      }
     
      function onAnimationFinish(viewer) {
        show("Animation finished");
      }


      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. */
      }
      #outputHolder
      {
        width: 500px;
        height: 1em;
        margin-bottom: 1em;
        font-size: 125%;
      }
      #outputText
      {
        font-style: italic;
        font-weight: bold;
        margin-left: 0.5em;
      }
    </style>
  </head>

  <body>
    <div id="outputHolder">
      Last event: <span id="outputText"></span>
    </div>
    <div id="container"></div>

  </body>
</html>