Ad

Update Image Src On Click

- 1 answer

I have a Shopify site: https://madetobrew.myshopify.com/products/3-4-sleeve-raglan-shirt?variant=28680590977

password: brewing

I am using http://www.jacklmoore.com/zoom/ to create an image zoom feature. However, when you select a variant image and then hover over the main product image, it shows you the variant that was originally loaded.

I cannot figure out how to change that img src. Here is what I've tried:

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

Help appreciated! Thanks.

Ad

Answer

You're initializing orignalImage and originalImageSrc on page load. You'll need to set them when the event occurs:

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