0

<img class="tile-image clp-hover-img"
             src="${product.images.medium[0].url}"
             itemprop="image" data-src="${product.images.medium[0].hoverImageUrl}"/>

I am having issue with the image hover. Currently it is working fine but after ajax call, hover image won't work as expected. After page load, when I hover on the image, new hover image loads. When I select a new product using the swatch (AJAX), then it normally shows the new image. When I hover on it, it shows the old hover image itself.

Once I hover image on the container, hover image shows. After I select a new product (color but same product), image changes normally but the hover image will be showing the same of first product color.

var tempSrc = '';
 $(".clp-hover-img").hover(function(){
 tempSrc = $(this).attr('src');
 $(this).attr("src", $(this).data("src"));
 }, function(){
 $(this).attr("src",tempSrc);
});
Kiran Lala
  • 146
  • 9
  • I think you need to use prop instead of attr here to swap the src.. – fylzero Feb 14 '19 at 20:50
  • src is fine. It's issue with data-src only – Kiran Lala Feb 14 '19 at 20:52
  • data-src is the hover image. After selecting a new color(via ajax), hover image shows the hover image before I selected the color – Kiran Lala Feb 14 '19 at 20:52
  • The way you have this written it should revert to the original src / aka the tempSrc image. Is that not what is desired? hmmm... You'd have to include more info. I can't see how the color selection is working or affecting this from what you have posted here. Please explain the expected functionality instead of what is broken and maybe that will help me think about it. – fylzero Feb 14 '19 at 21:00

0 Answers0