Using Image Viewer with HTML5 and JavaScript

Summary

JavaScript file: Leadtools.Controls.js

Namespace: Leadtools.Controls

Perform the following steps to create an instance of 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 an HTML Div Element that will act as the container for the image viewer in the body section of the HTML page.
Create a new instance of ImageViewer and use it in the JavaScript code.

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>