jQuery show image when thumbnail clicked

Question

Hey all, I have a list of 4 thumbnail images. When one of these thumbnails are clicked, I want it's bigger partner image to show off to the side. Only one bigger image can be shown at once. As it is right now I am stacking all 4 bigger images on top of each other and have a z-index set on the #1 image so it's sitting on top of the stack by default. I figure the best way to achieve this is when a thumb is clicked, the z-index is set to 0 on all images and the partner bigger image z-index is set to a higher number?

What would be the simplest way to do this via jQuery? I'm sure I could find some fully featured gallery plugin to do this, but that just seems way overkill, you know? Thanks for any suggestions. My current HTML is posted below:

    <style>
#productimagewrap {
    position:absolute;
    height:350px;
    }
#productimagewrap img {
    position:absolute;
    left:0;
    top:0;
}
</style>
<div class="moreimages">
    <a ahref="#" id="productthumb1">
        <img src="/images/products/ring1-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb2">
        <img src="/images/products/ring2-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb3">
        <img src="/images/products/ring3-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb4">
        <img src="/images/products/ring4-product_thumb.jpg" />
    </a>
</div>


<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
    <a href="/images/products/ring2-large.jpg" class="jqzoom" id="productimage2">
        <img src="/images/products/ring2-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring3-large.jpg" class="jqzoom" id="productimage3">
        <img src="/images/products/ring3-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring4-large.jpg" class="jqzoom" id="productimage4">
        <img src="/images/products/ring4-product.jpg" alt="Amber Ring" />
    </a>
</div>

Answer 1

There are multiple ways do it. The simplest way would be to keep the default one visible and then just change its src attribute. This would be done like this:

<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
</div>

This is the default image and now for the jquery part:

$('.moreimages a').each(function() {
    $(this).click(function() {
        $('#productimagewrap img').attr('src', $(this).attr('src'));
    });
});

This will bind click even on any link in your moreimages class and on click select its src and change the src of the zoomed image. This code will do it, but you will need to change the name of the images or replace them or something as this will display the small one there. I will leave that to you since I dont want to mess with that right now :P

Answer 2

I wouldn't go the z-index route. Causes extra issues you shouldn't have to deal with. Try this:

$(function() {
  $('#productimagewrap a:gt(1)').hide();
  $('.moreimages a').click(function() {
    var index = $('.moreimages a').index(this);
    $('#productimagewrap a:visible').hide();
    $('#productimagewrap a:eq('+index+')').show();
  });
});

Oh, and make sure to remove that "ahref" attribute from your .moreimages anchors ;)