Image Viewer Components - Namespace - HTML5 JavaScript Help

Image Viewer Components

Summary

The ImageViewer requires that your browser support the HTML5 Canvas Element.

To understand the various elements of the ImageViewer, consider an example where you have the following HTML:

JavaScript Example
<div id="imageViewerContainer" style="width:800px; height:800px"></div> 

When the ImageViewer has been created, that original div will have child elements:

JavaScript Example
<!-- The original container div --> 
<div id="imageViewerContainer"> 
   <!-- Image Viewer Parts are created as child elements of the div passed by the user --> 
   <!-- The main div for the viewer --> 
   <div class="lt-imageviewer-main"> 
      <!-- The viewer auto scroll div, when scroll mode is Auto --> 
      <div class="lt-imageviewer-autoscroll"></div> 
   </div> 
   <!-- The holder for the view div (Elements Mode only) --> 
   <div class="lt-imageviewer-viewholder"> 
      <!-- The view div (Elements Mode only) --> 
      <div class="lt-view"></div> 
   </div> 
   <!-- The viewer events canvas (Elements Mode only) --> 
   <canvas class="lt-imageviewer-eventcanvas"></canvas> 
   <!-- The viewer pass-through div (Elements Mode only) --> 
   <div class="lt-imageviewer-passthrough"></div> 
   <!-- The viewer foreground canvas --> 
   <canvas class="lt-imageviewer-forecanvas"></canvas> 
   <!-- The viewer image loading div (hidden) --> 
   <div class="lt-imageviewer-images"></div> 
</div> 

From the above, you can deduce that creating an image viewer inside a div will add the following elements to your HTML page:

Element CSS class name used for styling ImageViewer property Description
Main Viewer Div lt-imageviewer-main MainDiv

A container div. You can customize this div element using its CSS class name.

Auto Scroll Div lt-imageviewer-autoscroll AutoScrollDiv

The auto scroll div is used to show and control the size of the scroll bars when ScrollMode is ImageViewerScrollMode.Auto. Customize this div by using its CSS class name.

View Holder Div lt-imageviewer-viewholder ViewDivHolder

The view holder div is a container for the ViewDiv. It only exists in Elements Mode. Customize this div by using its CSS class name.

View Div lt-imageviewer-view ViewDiv

The view div is the root of the rendered HTML image viewer in Elements Mode. See the Elements Mode topic for more information about this element. Customize this div by using its CSS class name.

Event Canvas lt-imageviewer-eventcanvas EventCanvas

The event canvas is used only in Elements Mode and when HTML Pointer Events is supported for User-Defined HTML Display. When supported, this canvas will consume events instead of the ForeCanvas.

Pass-through Div lt-imageviewer-passthrough PassthroughDiv

The pass-through div is used only in Elements Mode and when HTML Pointer Events is supported for User-Defined HTML Display. When supported, this div will be used to hold HTML with which the user can interact.

Foreground Canvas lt-imageviewer-forecanvas ForeCanvas

The foreground canvas. The image data of the items will be drawn into the surface of this canvas, and when the EventCanvas does not exist then this canvas will capture pointer input as well. Customize this canvas by using its CSS class name.

Image Loading Div lt-imageviewer-images ImagesDiv

This div is used internally by the ImageViewer to assist in loading SVG images. This div is not visible and should not be styled.

If the image viewer is not using Elements Mode, then in addition to these elements, the image viewer will create an img or a canvas element for each item to hold the image data. These items are not added to the HTML page. They are rendered into the foreground canvas using the render cycle.

If the image viewer uses Elements Mode, then it will add the item's HTML elements (img or canvas) to the DOM. See the Elements Mode topic for more information on that ImageViewer structure.

Help Version 20.0.2018.7.3
Products | Support | Contact Us | Copyright Notices
© 1991-2018 LEAD Technologies, Inc. All Rights Reserved.

LEADTOOLS HTML5 JavaScript