Gallery Carousel is a JQuery Plugin which creates a sliding gallery of image thumbnails that can be clicked to view a full size image.  The full size image can also have a caption and/or hyperlink.  The plugin is configurable and easy to set up, requiring little markup.
Download packed code for Gallery Carousel v1.1

(requires JQuery v1.3.2)

New in v1.1

  • You can now add captions for each image
  • You can now add a link for each image to navigate to

Instructions

To create a new gallery, you need to first include the script in your page, after you have included the JQuery script.

<script src="includes/galleryCarousel-1.1.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into.  If you want to put captions somewhere for each image, you will also need a div or span for this:

<img id="featuredImg" />
<span id="caption"></span>
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag (“alt”) and thumbnail (“thumb”) can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Captions

When you have specified a caption for an image, it will be shown – you can specify text or html for your caption.  When there is no caption specified for an image, the caption container will be hidden.

images[0] = {
    src : '/path/to/my/image.jpg',
    caption : 'This is my image caption.'
}

Main Image Hyperlink

You can specify a page to navigate to when clicking on an image, which is useful for portfolios and such.  To specify an image, simply add a url property like so:

images[0] = {
    src : '/path/to/my/image.jpg',
    url : '/path/to/my/page.html'
}

Property List

Here is a list of the configuration options and their defaults:

Property Name Default Value Description
itemsShown 3 The number of images visible atany one time
step 1 The number of images to scroll past when next/prev links are clicked
target $(‘#galleryImg’) The selector for the full size image
selectedClass selected The class for an image thumnail that is currently being displayed
nextBtn $(‘a#galleryNext’) The selector for the next link
prevBtn $(‘a#galleryPrev’) The selector for the previous link
highAlpha 1 The opacity of a selected / hovered thumnail
lowAlpha 0.5 The opacity of a non-selected thumbnail
scrollTime 500 The time in ms it takes to scroll left or right
interval 1000 The time in ms between automatic scrolling (set to 0 to disable auto-scrolling)
carouselClass gallery The class for the <ul> element (in case you want to style it easily)
captionTarget $(‘#caption’) The selector for your caption container
images n/a A collection of images (see below)

The following is a list of the properties for the images object:

Property Name Default Description
src n/a URL of the full size image
thumb n/a URL of the thumbnail (optional)
alt n/a Alt tag for the thumb / full image (optional)
url n/a The url you want to navigate to on clicking the full image
caption n/a The caption you want associated with this image