单击时更新图像 src

Question

我有一个 Shopify 网站：https://madetobrew.myshopify.com/products/3-4-sleeve-raglan-shirt?variant=28680590977

密码：酿造

我正在使用http://www.jacklmoore.com/zoom/ 创建图像缩放功能。但是，当您选择变体图像然后将鼠标悬停在主产品图像上时，它会显示最初加载的变体。

我不知道如何更改该 img src。这是我尝试过的：

<div class="product-single__photos zoom" id="ProductPhoto" style="position: relative; overflow: hidden;">

<img src="//cdn.shopify.com/s/files/1/1625/0575/products/mockup-6891c36f_large.jpg?v=1480645915" alt="3/4 sleeve raglan shirt" id="ProductPhotoImg">
<img src="//cdn.shopify.com/s/files/1/1625/0575/products/mockup-c5dfc676_large.jpg?v=1480645911" class="zoomImg" style="position: absolute; top: -138px; left: -146.25px; opacity: 0; border: none; max-width: none; max-height: none; cursor: -webkit-zoom-in; width: 720px; height: 720px;">

var originalImage = $('#ProductPhotoImg');
var originalImageSrc = originalImage.attr('src');

$('.product-single__thumbnail').on('click', function() {
  $('.zoomImg').attr('src', originalImageSrc);
});

帮助表示赞赏！谢谢。

Answer 1

您在页面加载时初始化 orignalImage 和 originalImageSrc。您需要在事件发生时设置它们：

$('.product-single__thumbnail').on('click', function() {
    let originalImage = $('#ProductPhotoImg'); 
    let originalImageSrc = originalImage.attr('src');
    $('.zoomImg').attr('src', originalImageSrc);
});