Using Interactive and Size Modes

Summary

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

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

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

<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>

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

JavaScript

// 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);