Using Interactive and Size Modes

Take the following steps to display an image and apply various interactive and size modes.

1. Start with the html file you created in Displaying an Image.

2. Add two select elements to your page by inserting the below code in the body section of the HTML. These elements will be used to select the various interactive and size modes.

   JavaScript Example

   <label for="interactiveMode">Interactive Mode:</label> 
   <select id="interactiveMode"> 
      <option>None</option> 
      <option>Pan and Zoom</option> 
      <option>Zoom To</option> 
      <option>Mag Glass</option> 
      <option>Center At</option> 
      <option>Rubberband</option> 
   </select> 
   <label for="sizeMode">Size mode:</label> 
   <select id="sizeMode"> 
      <option>None</option> 
      <option>Actual Size</option> 
      <option>Fit</option> 
      <option>Fit Always</option> 
      <option>Fit Width</option> 
      <option>Fit Height</option> 
      <option>Stretch</option> 
   </select> 

3. Add the following code to app.js after loading the image:

   JavaScript Example

   // Set the interactive mode 
   var interactiveMode = document.getElementById("interactiveMode"); 
   interactiveMode.addEventListener("change", function () { 
      var modeName = interactiveMode.options[interactiveMode.selectedIndex].innerHTML; 
      switch (modeName) { 
         case"Pan and Zoom": 
            imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
            break; 
         case"Zoom To": 
            imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerZoomToInteractiveMode(); 
            break; 
         case"Mag Glass": 
            imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerMagnifyGlassInteractiveMode(); 
            break; 
         case"Center At": 
            imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerCenterAtInteractiveMode(); 
            break; 
         case"Rubberband": 
            imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
            break; 
         default: 
            imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerNoneInteractiveMode(); 
            break; 
      } 
   }, false); 
                    
   // Set the size mode 
   var sizeMode = document.getElementById("sizeMode"); 
   sizeMode.addEventListener("change", function () { 
      var sizeModeName = sizeMode.options[sizeMode.selectedIndex].innerHTML; 
      switch (sizeModeName) { 
         case"Actual Size": 
            imageViewer.zoom(lt.Controls.ControlSizeMode.actualSize, 1, imageViewer.defaultZoomOrigin); 
            break; 
         case"Fit": 
            imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin); 
            break; 
         case"Fit Always": 
            imageViewer.zoom(lt.Controls.ControlSizeMode.fitAlways, 1, imageViewer.defaultZoomOrigin); 
            break; 
         case"Fit Width": 
            imageViewer.zoom(lt.Controls.ControlSizeMode.fitWidth, 1, imageViewer.defaultZoomOrigin); 
            break; 
         case"Fit Height": 
            imageViewer.zoom(lt.Controls.ControlSizeMode.fitHeight, 1, imageViewer.defaultZoomOrigin); 
            break; 
         case"Stretch": 
            imageViewer.zoom(lt.Controls.ControlSizeMode.stretch, 1, imageViewer.defaultZoomOrigin); 
            break; 
         default: 
            imageViewer.zoom(lt.Controls.ControlSizeMode.none, 1, imageViewer.defaultZoomOrigin); 
            break; 
      } 
   }, false); 

4. Launch the page in a browser that supports HTML5 to test it.