Gallery Carousel does what it says on the tin. It’s part image gallery, part carousel. It provides an unordered list of images which can be scrolled horizontally. When an image is clicked or the list is scrolled, the main image is updated to the larger version of the thumb. In order to use Gallery Carousel you must include jQuery 1.3.2 before you create a new carousel. Creating a carousel requires relatively little markup, just a list of images, a couple of links to navigate and an image to represent the full size image.

 

Download packed code for Gallery Carousel v1.0

Here is a stripped down version.  First, include the galleryCarousel javascript file in the <head> section of your page:

<script src="includes/galleryCarousel-1.0.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:

<img id="featuredImg" />
<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>

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