的jQuery - 替换动态图像源的主图像源(jQuery - Replace main imag

我有示出的图像的列表，并且每个图像得到1个或多个附加的缩略图图像的列表。

使用时将鼠标悬停在产生额外的图像之一，主图像具有与addional图像的来源发生变化，而当鼠标离开该缩略图，原有的主图像源回来。

我设法使它工作，但它仅与更新在循环中找到的最后thumnbail源，所以我基本上坚持在这里是不是在工作的时刻我的代码

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

非常感谢

Answer 1:

UPDATE：中显示的标记您的codepaste是无效的，因为你有你的div容器重复ID属性。 你没能在所有显示的代码重复了几次你原来的问题清楚。 改变每个id="product"以class="product"和下面的代码将工作：

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

演示： http://jsfiddle.net/s9Rhx/2/

包括上述的JavaScript 一旦你的页面上，每个产品格不是一次。

上述工作通过所有的循环首先mainImg的div和存储其原来的默认图片src。 然后，它直接与事件处理程序的缩略图锚IMG元素。 悬停它使用.closest()最多导航到含有class="product"的div（不要忘记改变id为class ），然后.find()得到回落到mainImg当前内DIV容器。

Answer 2:

首先，你必须是错误的同一页面上的多个ID。 我改变了每个ID类，因此它成为class="product"

完整的演示： http://jsbin.com/AWoNimO/2/edit

演示HTML为您提供的 - 我增加了一些假的图像进行演示：

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

尝试这个：

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

文章来源: jQuery - Replace main image source with dynamic image source