Update image src on click

Question

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.

Daerik Daerik · Accepted Answer · 2016-12-07T14:44:52

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

Update image src on click

1 Answers