I have a page that has a large image on it with a number of thumbnails. When you mouse over a thumbnail the main image changes to the image you have just rolled your mouse over. The problem is the more thumbnails I have, the more repeated code I have. How could I reduce it?
The Jquery code is as follows.
<script type="text/javascript">
$('#thumb1')
.mouseover(function(){
$('#big_img').fadeOut('slow', function(){
$('#big_img').attr('src', '0001.jpg');
$('#big_img').fadeIn('slow');
});
});
$('#thumb2')
.mouseover(function(){
$('#big_img').fadeOut('slow', function(){
$('#big_img').attr('src', 'p_0002.jpg');
$('#big_img').fadeIn('slow');
});
});
$('#thumb3')
.mouseover(function(){
$('#big_img').fadeOut('slow', function(){
$('#big_img').attr('src', '_img/p_0003.jpg');
$('#big_img').fadeIn('slow');
});
});
$('#thumb4')
.mouseover(function(){
$('#big_img').fadeOut('slow', function(){
$('#big_img').attr('src', '0004.jpg');
$('#big_img').fadeIn('slow');
});
});
</script>
#big_img = the ID of the full size image
#thumb1, #thumb2, #thumb3, #thumb4 = The ID's of the thumbnails
The main code for the page is PHP if that helps.
