I have a gallery with on big image, and small thumbnails. And when I click on one of the small thumbnails the big image should be replaced with a big image version of the small thumbnail I clicked on.
For that I have a little javascript function that I got working, but the problem I have now is that I can't get it to replace the big image version of the thumbnail you clicked on, it just replace the big image with the thumbnail size you have clicked on.
could somebody help me out with this?
I'm open for other suggestion on how to do this if there are any..
Javascript code:
<script type="text/javascript">
function chgBigImg( img ){
var bigImg = document.getElementById( "Big-img" );
var src = img.src;
bigImg.src = src;
}
</script>
Template code big image:
<% control Attachment %>
<% control SetWidth(470) %>
<img src="$URL" alt="$Title" id="Big-img" />
<% end_control %>
<% end_control %>
Template code small thumbnails:
<% control Attachment %>
<% control SetWidth(70) %>
<img src="$URL" alt="$Title" onclick="chgBigImg(this); return false;" />
<% end_control %>
<% end_control %>