jQuery - 用动态图像源替换主图像源

Posted 2023-05-09

【中文标题】jQuery - 用动态图像源替换主图像源

【英文标题】：jQuery - Replace main image source with dynamic image source

【发布时间】：2014-02-10 22:13:41

【问题描述】：

我有一个图片列表，每张图片都有一个包含 1 个或多个附加缩略图的列表。

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

我设法让它工作，但它只使用循环中找到的最后一个缩略图更新源，所以我基本上被困在这里是我的代码目前不工作

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

非常感谢

【问题讨论】：

不要把 javascript 放在 php 循环中...

【参考方案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 内当前容器。

【讨论】：

@AamirAfridi - 我认为锚点具有全尺寸图像 URL，但锚点中的 img 具有缩略图大小的图像。这就是 PHP 代码似乎正在做的事情。

谢谢，但由于某种原因，此解决方案不起作用。 Aamir Afridi 的解决方案有效，但页面上的每个 .mainImg 图像源都被缩略图源替换，不仅当前图像的缩略图被悬停...请查看此处输出的代码：codepaste.net/pm47b8

我没有意识到以上所有内容都在您的页面上重复了。这改变了事情。此外，您的 codepaste.net 链接上的代码也不是您上面的 PHP 将输出的代码，因为例如，缩略图锚没有像上面的 PHP 那样在其 src 中指定图像。无论如何，更新答案以使用您的代码粘贴中的代码。

对不起，我有点累了，没有注意到...感谢您的解决方案有效。不过有一件事，当鼠标离开缩略图时，我怎样才能让主图像源恢复到其原始图像源？有没有办法使用 toggle() 或者应该是 mouseleave 还是其他？

有多种方法可以在鼠标移出时恢复默认图像源 - 我已经使用想到的第一种方法更新了我的答案。

【参考方案2】：

首先，您在同一页面上有多个 ID，这是错误的。我将每个 id 更改为 class，使其变为 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"   title=""  src="http://lorempixel.com/60/60/sports/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg"   title=""  src="http://lorempixel.com/60/60/city/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg"   title=""  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"   title=""  src="http://lorempixel.com/60/60/cats/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg"   title=""  src="http://lorempixel.com/60/60/nature/">
            </a>
    <a class="thumb" href="#">
                <img class="productImg"   title=""  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');
    
  )
);

【讨论】：

我已将 js 脚本移出循环。这是有效的，但它会更改页面上每个 .mainImg 图像的来源。请看这里输出的代码：codepaste.net/pm47b8

【参考方案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); ?>" 
   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>

【讨论】：

请注意，您不需要.each() 循环：您可以只说thumbs.hover(...)，它将为thumbs 中的所有元素绑定一个单独的处理程序。为什么要检查 .length 是否大于 1？

你是对的，但是因为我在使用 .each() 之前遇到了一些问题，所以我总是在使用它之前检查它是否有超过 1 个元素。因为这就是我只有 1 个元素时的问题，它会在调用 .each() 时使我的脚本崩溃。