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.