0

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>

3 Answers 3

5

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

0
1

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 ;)

1
  • This was the solution I used. Works beautifully as each large image and it's surrounding anchor tag also needed to work with a jquery zoom plugin. Thanks!
    – liquilife
    Jun 10, 2010 at 20:57
0

re the answer from realshadow

I tried this but it seems to me that $(this) is an anchor so doesn't have a 'src' attribute

To make it work I used the following:

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

with the same caveat that you need to do some sort of "replace" on the 'src' to change the image name to the larger one

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.