我有一个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);
});
帮助表示感谢!感谢。
答案 0 :(得分:1)
您在页面加载时初始化orignalImage
和originalImageSrc
。您需要在事件发生时设置它们:
$('.product-single__thumbnail').on('click', function() {
let originalImage = $('#ProductPhotoImg');
let originalImageSrc = originalImage.attr('src');
$('.zoomImg').attr('src', originalImageSrc);
});