Question

I have a product page that has image thumbnails and links bellow for front cover and back cover to change the thumbnails. The problem is that when you click on those links to change the thumbnails ALL the image for the rest of the product thumbnails change as well.
How can I bind the click event to that product so only that thumbnail is changed?

This is my HTML (this list is repeated bellow for other products with different images):

<div class="product-main-image">
    // Here I have the thumb image
    <a href="Images/cards/us-sip-connect-5-front-hi-res.jpg" class="product-main-image-hover">
        <img src="Images/cards/us-sip-connect-5-front.jpg" class="product-image" />
    </a>
    // When I click front or back links it's changing all the thumbs for other product as well.
    <ul class="thumbs">
        <li><a href="Images/cards/front.jpg" rel="Images/cards/front-hi-res.jpg">Front</a></li>
        <li><a href="Images/cards/back.jpg" rel="Images/cards/back-hi-res.jpg">Back</a></li>
    </ul>
</div>

This is the jQuery:
$('.thumbs a').live('click', function(){  
   // Get the thumb image tag attributes
    var image_thumb = $(this).attr("href");
    var image_hi_res = $(this).attr("rel");

    // switch the image by removing the node and re-writing in the neccessary HTML
    $('.product-main-image-hover').remove();
$('.product-main-image').append('<a href="' + image_hi_res + '" class="product-main-image-hover"><img src="' + image_thumb + '" class="product-image" /></a>');
return false;
  });

Hope someone can lead me in the right direction. Thanks.

Answer 1

$('.product-main-image-hover') will select all the elements which have that class. So remove method on it will remove all the elements on the page. You need to basically find it within the current product. You can use jQuery closest method to find the product images container and then find the required element and remove. append will append the elements at the end of it so in this case you have to use prepend since you have to replace the image at the same location.

$('.thumbs a').live('click', function(){  
   // Get the thumb image tag attributes
    var image_thumb = $(this).attr("href");
    var image_hi_res = $(this).attr("rel");

    var productMainImage = $(this).closest('.product-main-image');

    // switch the image by removing the node and re-writing in the neccessary HTML
    productMainImage.find('.product-main-image-hover').remove();

    productMainImage.prepend('<a href="' + image_hi_res + '" class="product-main-image-hover"><img src="' + image_thumb + '" class="product-image" /></a>');

     return false;
  });