Zoom not working after switching image

[JerVoo]

So here's what happens: in a website there's an image gallery. This consists of one large image and multiple smaller thumbnails below it, which may contain videos and images. When the thumbnail list contains a video, this video is being opened in lightbox directly. When it's an image, the large image must be switched. Clicking on it should open the Fancybox.

This all works without a problem: the large image switches whenever I click on a thumbnail. But after the switch, the zoom doesn't always work. It only shows a part of the image and when I move my mouse around over the image, nothing changes. The lens does follow my mouse, which indicates that it partially behaves the way it should. If I zoom in or out once and move the lens around again, the behaviour is back the way it's supposed to be.

Question: how can this be fixed? HTML and Javascript in use is below.

HTML

<div class="product-image">
    <img id="elevate-zoom"
         src="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/image/540x540/3a4997032687f7efd319b4303c850616/t/d/td001.jpg"
         alt="Subway offset 170 x 80 bad links"
         data-zoom-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/image/3a4997032687f7efd319b4303c850616/t/d/td001.jpg"
         />
    </div>

    <div class="more-views">
        <span id="more-views">
                            <a href="#"
                   class="thumb"
                   data-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/small_image/540x/fccc4a89f8057f35a316af3ca89de648/b/a/bad2.png"
                   data-zoom-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/image/3a4997032687f7efd319b4303c850616/b/a/bad2.png"
                   data-lightbox-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/b/a/bad2.png"
                >
                    <img src="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/thumbnail/70x70/dcbf2dbb61bb6a07354f2c4be183206a/b/a/bad2.png" />
                </a>
                            <a href="#"
                   class="thumb"
                   data-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/small_image/540x/fccc4a89f8057f35a316af3ca89de648/b/a/bad_1.png"
                   data-zoom-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/image/3a4997032687f7efd319b4303c850616/b/a/bad_1.png"
                   data-lightbox-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/b/a/bad_1.png"
                >
                    <img src="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/thumbnail/70x70/dcbf2dbb61bb6a07354f2c4be183206a/b/a/bad_1.png" />
                </a>
                            <a href="#"
                   class="thumb"
                   data-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/small_image/540x/fccc4a89f8057f35a316af3ca89de648/b/a/bad1.png"
                   data-zoom-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/image/3a4997032687f7efd319b4303c850616/b/a/bad1.png"
                   data-lightbox-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/b/a/bad1.png"
                >
                    <img src="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/thumbnail/70x70/dcbf2dbb61bb6a07354f2c4be183206a/b/a/bad1.png" />
                </a>
                            <a href="#"
                   class="thumb"
                   data-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/small_image/540x/fccc4a89f8057f35a316af3ca89de648/t/d/td001.jpg"
                   data-zoom-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/image/3a4997032687f7efd319b4303c850616/t/d/td001.jpg"
                   data-lightbox-image="http://tegeldepot.hcdesigns.nl/media/catalog/product/t/d/td001.jpg"
                >
                    <img src="http://tegeldepot.hcdesigns.nl/media/catalog/product/cache/1/thumbnail/70x70/dcbf2dbb61bb6a07354f2c4be183206a/t/d/td001.jpg" />
                </a>
                    </span>

                    </div>

Javascript

    jQuery("#elevate-zoom").elevateZoom({
        gallery: 'more-vies',
        lensSize: 200,
        cursor: 'pointer',
        galleryActiveClass: 'active',
        imageCrossfade: true,
        scrollZoom : true,
        responsive: true
    });

    jQuery('#more-views a.thumb').on('click', function(event) {
        var largeImage = jQuery(this).attr('data-image');
        var smallImage = jQuery(this).find('img', 0).attr('src');

        var ez = jQuery('#elevate-zoom').data('elevateZoom');
        ez.swaptheimage(largeImage, largeImage);

        jQuery('.product-image > .zoomWrapper > img').attr('data-zoom-image', jQuery(this).attr('data-lightbox-image'));

        event.stopPropagation();
        event.preventDefault();
    });

    // Pass the images to Fancybox
    jQuery("#elevate-zoom").on("click", function(e) {
        jQuery.fancybox(jQuery(this).attr('data-zoom-image'));

        e.stopPropagation();
        e.preventDefault()

        return false;
    });

    jQuery('.zoomLens').on('click', function(e) {
        jQuery('#elevate-zoom').click();
    });

    jQuery('a.video').fancybox({
        type: 'iframe'
    });

[stanchak]

You need to manually add an event to your thumbnail clicks to switch out the 'background-image' in the inner div inside the zoomWindowContainer div.

A pain, but it worked just now for me via jquery.

$('div.zoomWindowContainer div').css({'background-image': 'url('http://newimageurl.jpg')'});

[JerVoo]

That actually doesn't fix it. The image in the zoonWindowContainer div is being replaced properly, but it doesn't move when I move the mouse over the image.

[mninaut]

same problem =/

[mninaut]

I got it @JerVoo

after onclick you need

// remove current zoom
$('.zoomContainer').remove();
$('#elevate-zoomr').removeData('elevateZoom');

and call again

jQuery("#elevate-zoom").elevateZoom({
gallery: 'more-vies',
lensSize: 200,
cursor: 'pointer',
galleryActiveClass: 'active',
imageCrossfade: true,
scrollZoom : true,
responsive: true
});

[coencoppens]

Thanks @mninaut, very helpful 👍

[pixelomo]

@mninaut you're actually amazing :D

[bencolla]

`I went with on click event to

$(".zoom2").elevateZoom({ zoomType : "inner", cursor: "crosshair" });

function myFunction3() {

$(".zoom3").elevateZoom({ zoomType : "inner", cursor: "crosshair" });
}
function myFunction2() {
$(".zoom2").elevateZoom({ zoomType : "inner", cursor: "crosshair" });
}

[Hozey]

Does anyone know how to get the Lightbox and Gallery to change to constrain when viewed on small screens?
Thanks

[sareerihsan]

thanks alot mninaut its work for me