Using the LEADTOOLS ImageViewer in HTML5 and JavaScript

Summary

JavaScript file: Leadtools.Controls.js

Namespace: Leadtools.Controls

Perform the following steps to create an instance of the LEADTOOLS ImageViewer in your HTML5/JavaScript application:

Add a reference to the Leadtools.js and Leadtools.Controls.js libraries in the head section of the HTML page.
Add a div tag to the body. It will be the container for the ImageViewer in the body section of the HTML page.
In a script tag, create a new instance of the ImageViewer and use it.

The following is a complete example:

JavaScript Example

<!DOCTYPE html> 
<html lang="en"> 
<head> 
   <title>ImageViewer Example</title> 
   <!-- The LEADTOOLS Javascript Libraries --> 
   <script src=Leadtools.js"></script> 
   <script src=Leadtools.Controls.js"></script> 
   <script type="text/javascript"> 
      window.onload = function () { 
         // Get the parent div for the image viewer 
         var div = document.getElementById("imageViewerContainer"); 
         // Create a new image viewer instance 
         var createOptions = new lt.Controls.ImageViewerCreateOptions(div); 
         var imageViewer = new lt.Controls.ImageViewer(createOptions); 
         // Load an image into it 
         imageViewer.imageUrl = "http://localhost/images/image1.png"; 
      } 
   </script> 
</head> 
<body> 
   <!-- The image viewer container div --> 
   <div id="imageViewerContainer" style="width:800px; height:800px"></div> 
</body> 
</html>