Using Image Viewer with HTML5 and JavaScript

JavaScript file: Leadtools.Controls.js

Namespace: Leadtools.Controls

Follow these 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:


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

Reference

Using ImageViewer
Image Viewer Components
Image Viewer Elements Mode
Image Viewer User Defined HTML Display
Using Multiple Image Viewers In Your Application
Image Viewer Appearance
Image Viewer Items
Image Viewer Bounds and Transform
Image Viewer Transformation
Image Viewer Layouts
Image Viewer Rendering
Image Viewer Scrolling
Image Viewer Interactive Modes
Image Viewer Other Operations
Image Viewer Single Item Mode
Image Viewer Drag and Drop
Image Viewer Interpolation