Question

我有一个显示的图像列表，每个图像都有一个或多个附加缩略图的列表。

当使用悬停在其中一个附加图像上时，主图像必须随附加图像的来源而改变，当鼠标离开该缩略图时，原始主图像源会回来。

我设法让它工作，但它只更新了循环中找到的最后一个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

更新：your 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 一次，而不是每个产品div。

上述工作首先循环遍历所有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 - 用动态图像源替换主图像源

3 个答案: