Support » Plugin: YITH WooCommerce Zoom Magnifier » Featured image and Gallery Images aren't swapping

  • Resolved eclombardo


    Hi – the plugin had been working fine until recently. What is happening is that now the featured image isn’t swapping out with the gallery photos when clicked, however, the “loading” notice flashes and the zoom/magnifier works properly. So in other words when you’re hovering over the featured image, the zoom/magnifier for the photo gallery photo shows, while its still showing the featured image. I’ve regenerated all thumbnails and still nothing. Any advice? My website is Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • +1 same issue.

    Are you guys using JetPack Photon?

    Jetpack recently upgraded their Photon module. Images delivered through Photon contain three attributes that determine the location of the image: src, srcset, and src-orig.

    When the user clicks on an image in the gallery, the YITH Zoom Magnifier plugin replaces the src attribute of the default image with the src attribute of the gallery image. This, effectively, displays the image the user clicked on. However, as noted above, Jetpack Photon now uses three attributes to describe the location of the image. The solution is therefore to make the YITH plugin not only replace the src, but also the srcset and src-orig attributes.

    In /wp-content/plugins/yith-woocommerce-zoom-magnifier/assets/js/frontend.js, add the following after line 24:

    yith_wcmg_image.attr('srcset', image_src);
    yith_wcmg_image.attr('src-orig', image_src);


    yith_wcmg_image.attr('srcset', yith_wcmg_default_image);
    yith_wcmg_image.attr('src-orig', yith_wcmg_default_image);

    after line 35.

    In /wp-content/plugins/yith-woocommerce-zoom-magnifier/assets/js/yith_magnifier.js, add:

        .attr('title', '')
        .attr('title', t.attr('title'));
        .attr('title', '')
        .attr('title', t.attr('title'));

    after line 236.

    Don’t forget to minimize the JavaScript from both files, and use the minimized version in their respective .min.js files in the same directory.

    Hopefully, this fixes the issue for you.

    Sorry, how do I “minimize the JavaScript” from both files, and how do I use the minimized version in their respective .min.js files? Can you please elaborate?


    Nevermind, figured out how to minimize.

    Solution worked perfectly!! Thank you so much for your help!


    For future reference, what I meant by “minimizing the JavaScript code” is the following:

    1. Copy your modified code from frontend.js and yith_magnifier.js, and paste it here:

    Do each file separately. Do not copy the codes from both files at once.

    2. Copy the minimized JavaScript output from each file into their respective .min.js files: frontend.min.js and yith_magnifier.min.js. These files are located in the same directory as frontend.js and yith_magnifier.js.

    That’s it!

    I would not mark this as resolved yet. At least not until the YITH team fixes the issue in their own code, and pushes a new release.

    Plugin Author YITHEMES


    thanks to Hernán Villanueva, we released an update with your suggestion.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Featured image and Gallery Images aren't swapping’ is closed to new replies.