Using Multiple Image Viewers In Your Application

Summary

Multiple Image Viewers can be used on a single page, as is common when the setup includes a main viewer for documents and a 'sidebar' viewer for thumbnails of pages in the document.

When a viewer is created, it must be supplied an ImageViewerCreateOptions object. The ImageViewerCreateOptions object takes in its constructor a value for the ImageViewerCreateOptions.ParentDiv, the <div> element that LEADTOOLS code will create the viewer within. Numerous elements are created inside, each of which needs certain stylings applied. To handle the application of these styles, the elements are given class names and a <style> element is created and added to the <head> of the page. If additional image viewers are added to the page, they will continue to use the same <style> elements - no duplicates are created.

ImageViewerCreateOptions.ParentDivClass allows the user to affect the class name that is applied to the <div> element that was passed through ImageViewerCreateOptions. The user may do this to ensure the name does not conflict with other classes applied to other elements on the page, or if the user creates CSS stylings based off that class name and does not want that class name applied to any other possible image viewers on the page. In this way, the class name serves as a namespace, and other elements created for use in the viewer (with the exception of global elements that are not to be changed by the user) will use that class name as a prefix for their own class names. This is all done at the time of the creation of the viewer.

ParentDivClass has a default value of "lt-imageviewer". When the viewer is created, a <style> element will be created to apply rules to the elements based off this name. If the user adds a new image viewer with a different ImageViewerCreateOptions object and a different ImageViewerCreateOptions.ParentDivClass value, then another <style> element will be created for that class name. These <style> elements are removed if the viewer is removed with ImageViewer.Dispose.

When in Elements Mode, additional <style> elements will be created to handle the ImageViewerElementsModeCreateOptions.ClassPrefix property, which provides the same benefits. These styles will also be removed when the viewer is disposed properly, and no duplicates are ever created.