smartGallery v2.1 by Vel Forrester
smartGallery v2 adds many new features to make the plugin more widely compatible and adds a few visual enhancements as well. CSS transitions were added to the opening and closing of the lightbox as well as the toggling of the gallery carousel. Element IDs are used as image and gallery itentifiers to allow for multiple instances of the smartGallery object and zoomImage object on the same page. Version 2.1 no longer requires reloading of the entire lightbox to switch images which creates a more fluid UI and enables the use of animation. Version 2 removed the plugins jQuery library dependency and added swipe events to the lightbox.
Link to smartGallery.css in the header
Link to smartGallery.js as the last element before the closing body tag
Add close.png, next.png, and previous.png to '/root/graphics'
Add the following div as the first element after the opening body tag:
<div id="sg-lightbox"></div> <!-- lightbox container must have class sg-lightbox -->
Add class sg-galleryImage to a set of images contained within a parent node with a class of sg-gallery to create a new smartGallery instance on click:
<div id="galleryId" class="sg-gallery sg-center"> <!-- gallery container must have class sg-gallery --> <img id="imageId1" class="sg-galleryImage" src="/path/to/image"/> <!-- images must have class of sg-galleryImage --> <img id="imageId2" class="sg-galleryImage" src="/path/to/image"/> <img id="imageId3" class="sg-galleryImage" src="/path/to/image"/> ... </div> <!-- end gallery container -->
Add the class sg-zoomImage to a single image to create a new smartZoom object on click:
<img id="imageId" class="sg-zoomImage" src="/path/to/image"> <!-- image must have class sg-zoomImage -->