Each image in the gallery is wrapped in a link element, and the script prevents the default behavior of the link, so users who have JavaScript off are still able to see the image in a new page, and those who have JavaScript on will see it in the gallery with fading effect.
HTML:
<div id="main-photo">
<a href="img/1.jpg"><img src="img/1.jpg"></a>
</div>
<div id="thumbs">
<a href="img/1.jpg"><img src="img/1.jpg" width="110" height="70"></a>
<a href="img/2.jpg"><img src="img/2.jpg" width="110" height="70"></a>
<a href="img/3.jpg"><img src="img/3.jpg" width="110" height="70"></a>
<a href="img/4.jpg"><img src="img/4.jpg" width="110" height="70"></a>
<a href="img/5.jpg"><img src="img/5.jpg" width="110" height="70"></a>
</div>
Javascript:
Remember to insert this after the jQuery library.
(function($) {
$(function() {
$('#thumbs a').click(function() {
var newPhoto = $('');
newPhoto.hide();
var oldPhoto = $('#main-photo img');
$('#main-photo').html(newPhoto);
newPhoto.fadeIn(500);
oldPhoto.remove();
return false;
});
});
})(jQuery)