Vel Forrester logo

smartGallery v2.1 by Vel Forrester

smartGallery is a Javascript powered image lightbox plugin that can be added to almost any web application using HTML and CSS. The gallery includes an image carousel that displays all of the images in the current gallery, and also adds DOM swipe events for easier navigation on touch capable devices. smartGallery does not require a database or admin panel and can be set up using basic HTML and CSS. Once the required css and js files have been linked, and the lightbox container element has been added to your DOM, CSS classes can be added to image elements in your html to activate the plugin.

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.

Download smartGallery v2.1: smartGallery-v2.1.tar.gz smartGallery-v2.1.zip

Usage

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 -->

Examples

First smartGallery Instance

Two zoomImage Instances

Second smartGallery Instance