Overview

LightGallery is a JavaScript image viewer (similar to LightBox) which overlay images on the current page. It has the ability to show both single images and galleries using slide and fade effects. It is very small (7,7K - packed version, 9,8 - minified) yet powerfull and does not depend on any other libraries. It is tested in all A-grade browsers: IE 6/7, Firefox 2, Safari 3, Opera 9.

Features

• Zoom In/Out
• Ability to change full size/fit screen mode
• Nice animated effects - resize and fade
• Ability to set options: change animation speed, turn animation on/off, set sync resize, enable/disable zoom etc.
• Ability to add additional language packs (only Russian is available atm)
• Images preload
• Keyboard navigation

Examples

Single images:

The gallery:

Navigation

To move Prev/Next, zoom In/Out/FullSize/FitScreen use corresponding links or keyboard shortcuts:
“b” - previous, “n” - next, “f” - show full size, “+” - zoom in, “-” - zoom out, “Esc” - exit.

Installation

To insert LightGallery in your web page add the lightgallery script:

<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>

NOTE: you can choose between 3 scripts - normal (lightgallery.js), minified (lightgallery.min.js) and packed (lightgallery.packed.js). lightgallery.js should be used only for development purposes. In production environement use either minified or packed version. If you use GZip compression to deliver javascript files, then the best option is minified script.

If you need language packs, add it like this (example shows addition of russian language pack with UTF-8 encoding):

<script src="lightgallery/lang/ru_utf8.js" type="text/javascript"></script>

Call the lightgallery.init() function in onload event:

window.onload = function(){
	lightgallery.init();
}

You can also use different options:

window.onload = function(){
	lightgallery.init({
		enableZoom:false,
		speed:50,
		fadeImage:false
	});
}

Available options:

• animate (default - true) - turn on/off animation
• framesNumber (default - 20) - number of frames used in animation
• speed (default - 30) - timespan between each frames, msek
• resizeSync (default - false) - if set to true - the container is resized both vertically and horizontally at the same time
• enableZoom (default - true) - turn on/off zoom in/out
• fadeImage (default - true) - use fade effect for image (it is better to turn it off for large images)
• alias (default - ‘lightgallery’) - alias to use for the rel attribute (rel = ‘lightgallery’).

Then add style.css from the skin/default directory (now LightGallery contains only one skin - default):

<link href="lightgallery/skins/default/style.css" type="text/css" media="screen" rel="stylesheet" />

And the last step - you need to mark all links that needs to be shown by LightGallery with rel=”lightgallery” attribute. All images that needs to be grouped in the galleries must contain gallery name in square brackets, i.e. rel=”lightgallery[flowers]”. The value of the title attribute of the link will be shown in the title of the viewer. Examples:

Single images

<a href="001.jpg" rel="lightgallery" title="Leaves after rain"><img src="001_t.jpg" alt=""/></a>
<a href="002.jpg" rel="lightgallery" title="Pink flowers">Pink flowers</a>

Gallery

<a href="001.jpg" rel="lightgallery[flowers]" title="Leaves after rain"><img src="001_t.jpg" alt="" /></a>
<a href="002.jpg" rel="lightgallery[flowers]" title="Pink flowers"><img src="002_t.jpg" alt="" /></a>

NOTE: You can change the “lightgallery” attribute to something else using the alias option. Change it to “lightbox” if you need LightBox compatibility:

window.onload = function(){
	lightgallery.init({
		alias : 'lightbox'
	});
}

Download

Current version 1.1 - download

Visit the LightGallery project at GoogleCode

Contact

For troubleshooting, feature request and general notes email me at: ischenkodv@gmail.com