Needing to extend the functions of a simple jQuery gallery?
I found a simple jQuery gallery to implement on my site. However, I have 1 problem. I need to be able to revert back to the original picture, while you've clicked on a different image. For example, when you load the gallery, you'll see image 1, then you can click on the thumbnails to view the other images. The problem I'm having is that I don't have image 1 as a thumbnail and therefore can't view it once you've click on a different thumbnail. So I'm trying to figure out, how I can extend the code to revert back to image 1.
HTML:
<div class="img-main"><img src="img/cakes.jpg"></div>
<div class="img-thumbs">
<a class="thumb" href="img/cake-lrg.jpg"><img src="cake-sm.jpg"></a>
<a class="thumb" href="img/cake-lrg.jpg"><img src="cake-sm.jpg"></a>
<a class="thumb" href="img/cake-lrg.jpg"><img src="cake-sm.jpg"></a>
</div>
JS:
$(function() {
$('.thumb').click(function() {
var image = $(this).attr('rel');
$('.img-main').hide();
$('.img-main').fadeIn('fast');
$('.img-main').html('<img src="' + image + '">');
return false;
});
});
I'm very inexperienced with jQuery, so any help would be appreciated. Thank you!