Ages ago I wrote this script to swap a main image when a thumbnail is clicked
and here are the images
However now when the thumbnail is clicked, the loader shows but then the original main image re-shows instead of the large version of the thumbnail.
Can anyone help?
Code:
<script type='text/javascript' src='[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>[/URL]
<script type="text/javascript">
jQuery(document).ready(function() {
$('.thumbnail').live("click", function() {
$('.shop_single').hide();
$('#image-main').css('background-image', "url('loading.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('.shop_single').attr('src', i.attr('src'));
$('#image-main').css('background-image', 'none');
$('.shop_single').fadeIn();
});
return false;
});
});
</script>
and here are the images
Code:
<div id='image-main'>
<img width="392" height="392" src="large.jpg" class="shop_single" alt="" />
</div>
<div id='image-thumbs'>
<a href="large1.jpg" class="thumbnail">
[indent]<img width="91" height="91" src="small1.jpg" alt="" />[/indent]
</a>
</div>
However now when the thumbnail is clicked, the loader shows but then the original main image re-shows instead of the large version of the thumbnail.
Can anyone help?