jQuery Gallery Plugin

jQuery Gallery Plugin take a grouping of images and turn it into an flash-like image/photo gallery.

Demo

Quick Start

Starting with jQuery Gallery is really easy!

Setup:

Include the script and stylesheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)

<link href="jquery.gallery.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.gallery.js"></script>

JavaScript:

$('#id_of_gallery').gallery({
  interval: 5500,
  height: '400px',
  width: '500px'
});

HTML:


<div id="id_of_gallery" class="gallery">
  <ul class="galleryBar">
    <li><a href="picture1.jpg" title="demo #1."><img src="thumbnail1.jpg" title="image1" /></a></li>
    <li><a href="picture2.jpg" title="demo #2."><img src="thumbnail2.jpg" title="image2" /></a></li>
    <li><a href="picture3.jpg" title="demo #3."><img src="thumbnail3.jpg" title="image4" /></a></li>
  </ul>
</div>

The title attribute of img will be picture's title.

The title attribute of a will be picture's description.

CSS (jquery.gallery.css):


.gallery{
  position: relative;
  overflow: hidden;
  background-color: #666;
  padding: 12px;

  /* Add height & width properties to fix the size of gallery. */
  height: 400px; 
  width: 500px;
}

Using rel attribute to display description.

HTML:


<div id="gallery" class="gallery">
  <ul>
    <li><a href="picture.jpg" rel="id_of_description"><img src="tumbnail.jpg" title="image3" /></a></li>
  </ul>
</div>

<div id="id_of_description" style="display:none;">
  <p>This is a description of <i>picture.jpg</i>.</p>
</div>

Options:

option	type	default
barClass	string	'galleryBar'	Class name of thumbnail bar block.
barPosition	string	null	Position of thumbnail bar. 'top' or 'bottom'
contentClass	string	'galleryContent'	Class name of content block.
descClass	string	'galleryDesc'	Class name of description block.
easing	string	'linear'	The name of the easing effect for scrolling thumbnails. See jQuery Easing Plugin
height	string/integer	null
interval	integer	4500
infoClass	string	'galleryInfo'	Class name of gallery infomation block.
prefix	string	'gallery_'
ratio	float	0.35	Overlay's height to total height.
screenClass	string	'galleryScreen'	Class name of gallery screen block.
showOverlay	boolean	true	If set to false, the overlay disappear.
slideshow	boolean	true	If set to false, the thumbnail bar deosn't scroll automatically.
thumbHeight	integer	55	Height of thumbnail (px)
thumbWidth	integer	55	Width of thumbnail (px)
titleClass	string	'gelleryTitle'	Class name of title block.
toggleBar	boolean	true	Toggle displaying thumbnail bar.
width	string/integer	null

Events

onChange	function(index, element)	This event is triggered when picuture is appeared.
onClick	function(event, element)	This event is triggered when picuture is clicked.
onSelect	function(event)	This event is triggered when thumbnail is clicked.