Simple jQuery image carousel for our Findit section

Our old “Local Directory” was about to get a complete overhall to the extent that it wouldn’t be recognisable and I needed to add in a jQuery image carousel for the business owners images to be shown in.

Starting with a few wire frames in the initial stages we came up with the finished design shown above but I’ll show you the steps to how I got there. Please bear in mind that the code generated from the server is run on Velocity code / Java and this is how the images are rendered to the thumbnail slots from the database, an if statement hides any more than 3 images if available and allows the scrolling there after so for this vertually static example I have only put 3 images in for thumb nails. Of course we could make the simple jQuery image carousel larger and hence have more thumb nails in view – the possibilities are endless.

Lets start with the basic html for the container areas:

<div class="printAd"><span class="imagery"> <span class="imageMain"> 
-- This goes in as the pre-loaded image -- 
<img src="galleryImages/one.jpg" alt="" /> </span> </span>
<ul>
<ul>
    <li><img class="activeImg" src="galleryImages/one.jpg" alt="" /></li>
    <li><img src="galleryImages/two.jpg" alt="" /></li>
    <li><img src="galleryImages/three.jpg" alt="" /></li>
</ul>
<ul>
	<li class="previous">Previous</li>
	<li class="next"> Next</li>
</ul>
<ul class="noBack">
	<li class="floatL">All Photos</li>
	<li class="floatR">Upload Photo</li>
</ul>
</div>

The thumbnail images in the example are gaing to be made clickable and these will not only swap out the main image but also we will give it a little jQuery style on a click action.
Here is the jQuery code for the click action on the thumbnails

 $(function(){ $('.galleryThumb img').click(function () { 
var imagesource = $(this).attr('src'); 
$('.imageMain img').attr('src', imagesource); 
$('.galleryThumb img').click(function() { 
$('.galleryThumb img').removeAttr('class').fadeTo('opacity', '0.6'); 
$(this).addClass('activeImg').fadeTo('fast', '1'); 
});

This takes the opacity of the inactive thumb image down to 0.6 and fades in the clicked thumb to 1.
Below is the reset and the hover state jQuery – you can see the class of activeImage being used to style the thumb container on page load.

 
$('.galleryThumb img').css('opacity', '0.6'); 
$('.galleryThumb img.activeImg').css('opacity', '1'); 
$('.galleryThumb img.activeImg').hover(function() { 
$(this).css('opacity', '1')}, function () { 
$(this).css('opacity', '1'); 
}); 

And the CSS I used – of course this can vary greatly depending on the size and quantity of the thumbnails.

 
.imageMain{ 
float:left; width:215px; margin:0 0 5px; 
} 
.printAd li{ 
display:inline-block; 
} 
.printAd li a.galleryThumb img{ 
width:57px; height:57px; margin-top:-1px; padding:3px; border:none; 
} 
.printAd li a.galleryThumb img.activeImg{ 
margin-top:-2px; padding:3px; 
border-top:2px solid #fff; border-right:1px solid #999; 
border-bottom:1px solid #999; border-left:1px solid #999; 
} 

I don’t usually like using negative margins but sometimes it’s the only sensible way, after all its just a couple of pixels to move the active thumb upward to cover the borders of the main image container.
Any thoughts on this, do you have a simpler version you would like to share?