Media Viewer

Static Example

Dojo Control

Classes

• lotusGallery - the class that goes on the outermost node.
• lotusThumbnails - the class that goes on the thumbnail container.
• lotusNavControl - shared class by lotusNavPrev and lotusNavNext.
• lotusNavPrev - the class on the lotusNavControl node for the previous control.
• lotusNavNext - the class on the lotusNavControl node for the next control.
• lotusNavDisabled - the class on the lotusNavControl node when the control is disabled.
• lotusNavScroller - the class that goes on the thumbnail strip container.
• lotusThumbnailStrip - the class that goes on the thumbnail strip.
• lotusThumbnail - the class that goes on each thumbnail.
• lotusImageTrim - the class that constrains the thumbnail image size.
• lotusThumbOverlay - the class that goes on the node that overlays each thumbnail.
• lotusItemViewer - the class that goes on the viewer container.
• lotusItem - the class on the node that contains the main image.
• lotusNavEnd - the class that goes on lotusNavControl and lotusNavNext to display the last image indicator.
• lotusItemDetails - the class that goes on the footer container.
• lotusDetails - the class that goes on the node inside lotusItemDetails.
• lotusInner - the class that sets overflow hidden.
• lotusTitle - the class on the h2 for the image title.
• lotusCount - the class on the node that contains the image location count.

Basic Implementation

The static example was built in conjunction with the Dojo control. It contains control-specific attributes like id's and dojoattachpoint's.

Sample HTML - static example

CSS (mediaViewer.css)

Theme CSS (mediaViewerTheme.css)

March 21, 2011 - Component was created.

April 26, 2011 - Initial styling was completed.