jQuery - Replace main image source with dynamic image source

Question

I have a list of images showing and each image got a list of 1 or more additional thumbnail images.

When use hovers on one of the additonal images, the main image has to change with that addional image's source, and when mouse leaves that thumbnail, the original main image source comes back.

I managed to make it work but it only updates the source with the last thumnbail in found in the loop, so I'm basically stuck here is my code which is not working at the moment

<div>
    <img class="mainImg" src="http://mysource.com/img.jpg"/>
</div>

<div class="additionalImg">

     <?php
     $product = Mage::getModel('catalog/product')->load($_product->getId());
     /* getting additional images url */
    foreach ($product->getMediaGalleryImages() as $image) {?>

    <!-- thumbnails -->
        <a href="<?php echo $image->getUrl();?>">
            <img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(60, 60); ?>" 
            width="60" height="60" alt="" title="" />
        </a>
    <!-- end thumbnails -->

    <script>
    // var newSrc = jQuery('.additionalImg a img').attr('src');
    jQuery('.additionalImg a').hover(function(){
            jQuery('.mainImg').attr("src", newSrc)
        });
    </script>

        <?php };?>
</div>

Thanks a lot

Answer 1

UPDATE: The markup shown in your codepaste is invalid because you have duplicate id attributes in your container divs. You didn't make it clear in your original question that all of the code shown was repeated several times. Change each id="product" to class="product" and the following code will work:

jQuery(document).ready(function() {
    jQuery('.mainImg').each(function() {
        $(this).data("original", this.src);                
    });

    jQuery('.additionalImg a img').hover(function () {
        jQuery(this).closest('.product').find('.mainImg').attr("src", this.src);
    },function() {
        var $main = jQuery(this).closest('.product').find('.mainImg');
        $main.attr("src", $main.data("original"));
    });
});

Demo: http://jsfiddle.net/s9Rhx/2/

Include the above JavaScript once on your page, not once per product div.

The above works by firstly looping through all of the mainImg divs and storing their original default image src. Then it binds the event handler directly to the img elements in the thumbnail anchors. On hover it uses .closest() to navigate up to the containing class="product" div (don't forget to change the id to a class), then .find() to get back down to the mainImg div within the current container.

Answer 2

First you have multiple IDs on same page which is wrong. I changed each id to class so it become class="product"

Complete demo: http://jsbin.com/AWoNimO/2/edit

Demo HTML as you provided - I have added few dummy images for the demo:

<div class="product">   <a href="http://link.to/">
      <img class="mainImg" src="http://lorempixel.com/output/fashion-q-c-60-60-8.jpg"/>
    </a>

    <div class="additionalImg"> <a class="thumb" href="#">
                <img class="productImg" width="60" height="60" title="" alt="" src="http://lorempixel.com/60/60/sports/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg" width="60" height="60" title="" alt="" src="http://lorempixel.com/60/60/city/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg" width="60" height="60" title="" alt="" src="http://lorempixel.com/60/60/animals/">
            </a>

    </div>
</div>
<hr>
<div class="product">   <a href="http://link.to/">
      <img class="mainImg" src="http://lorempixel.com/output/fashion-q-c-60-60-2.jpg"/>
    </a>

    <div class="additionalImg"> <a class="thumb" href="#">
                <img class="productImg" width="60" height="60" title="" alt="" src="http://lorempixel.com/60/60/cats/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg" width="60" height="60" title="" alt="" src="http://lorempixel.com/60/60/nature/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg" width="60" height="60" title="" alt="" src="http://lorempixel.com/60/60/food/">
            </a>

    </div>
</div>

Javascript:

$(function(){
  $('.mainImg').each(function(){$(this).data('original', this.src)});
  $('.thumb img').hover(
    function(){
      $(this).closest('.product').find('.mainImg')[0].src = this.src;
    },
    function(){
      var $mainImg = $(this).closest('.product').find('.mainImg');
      $mainImg[0].src = $mainImg.data('original');
    }
  )
});

Answer 3

Try this:

<div>
    <img class="mainImg" src="http://mysource.com/img.jpg"/>
</div>

<div class="additionalImg">

     <?php
     $product = Mage::getModel('catalog/product')->load($_product->getId());
/* getting additional images url */
foreach ($product->getMediaGalleryImages() as $image) {?>

<!-- thumbnails -->
    <a href="<?php echo $image->getUrl();?>">
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(60, 60); ?>" 
width="60" height="60" alt="" title="" />
</a>
<!-- end thumbnails -->

    <?php };?>

    <script>
        $(function () {
            var thumbs = $('.additionalImg a');
            if (thumbs.length > 1) {
                thumbs.each(function () {
                    $(this).hover(function () {
                        $('.mainImg').attr("src", $(this).attr("href"));
                    });
                });
            }
        });
    </script>

</div>