Jquery - Replace Main Image Source With Dynamic Image Source

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 wit

Solution 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.

Solution 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:

<divclass="product"><ahref="http://link.to/"><imgclass="mainImg"src="http://lorempixel.com/output/fashion-q-c-60-60-8.jpg"/></a><divclass="additionalImg"><aclass="thumb"href="#"><imgclass="productImg"width="60"height="60"title=""alt=""src="http://lorempixel.com/60/60/sports/"></a><aclass="thumb"href="#"><imgclass="productImg"width="60"height="60"title=""alt=""src="http://lorempixel.com/60/60/city/"></a><aclass="thumb"href="#"><imgclass="productImg"width="60"height="60"title=""alt=""src="http://lorempixel.com/60/60/animals/"></a></div></div><hr><divclass="product"><ahref="http://link.to/"><imgclass="mainImg"src="http://lorempixel.com/output/fashion-q-c-60-60-2.jpg"/></a><divclass="additionalImg"><aclass="thumb"href="#"><imgclass="productImg"width="60"height="60"title=""alt=""src="http://lorempixel.com/60/60/cats/"></a><aclass="thumb"href="#"><imgclass="productImg"width="60"height="60"title=""alt=""src="http://lorempixel.com/60/60/nature/"></a><aclass="thumb"href="#"><imgclass="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');
    }
  )
});

Solution 3:

Try this:

<div><imgclass="mainImg"src="http://mysource.com/img.jpg"/></div><divclass="additionalImg"><?php$product = Mage::getModel('catalog/product')->load($_product->getId());
/* getting additional images url */foreach ($product->getMediaGalleryImages() as$image) {?><!-- thumbnails --><ahref="<?phpecho$image->getUrl();?>"><imgsrc="<?phpecho$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>