• Resolved adejones

    (@adejones)


    Hi, I am using jQuery to change the main image when a thumbnail is clicked, but obviously when the main image changes the zoom is still showing the original main image.

    Is there something I can add to my jQuery to change the image that the zoom is changing? So that when thumbnail 2 is clicked, base image is image 2 and the zoom then shows image 2. Perhaps if I change the data-zoom-image attribute as well as the image src?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Diana Burduja

    (@diana_burduja)

    Hello,

    the plugin works alright with static images and with the default WooCommerce product gallery. Unfortunately it will not work with dynamic images (i.e. the image is changed when a thumbnail is clicked).

    Changing the “data-zoom-image” attribute will not work, as the zoom window is built at page load.

    Thread Starter adejones

    (@adejones)

    Hi Diana

    I made this work by adding the following in to my jQuery:

    jQuery(‘.zoomLens’).css(‘background-image’, “url(” + image + “)”);

    This changes the image for the zoom to the same as the main image when the thumbnail is clicked.

    Full code:

    jQuery(‘.thumb’).click(function() {
    var image = jQuery(this).children(‘img’).attr(‘src’);
    jQuery(‘#activeImg’).children(‘img’).attr(‘src’, image);
    jQuery(‘.zoomLens’).css(‘background-image’, “url(” + image + “)”);
    });

    (When the thumbnail is clicked, get the src of the image within it, change the src of the main image to the same, then change the background image of the zoom to the same).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change zoom image when base image changes’ is closed to new replies.