Elevate Zoom adjust zoom window for different sized imagery

Question

I'm trying out Elevate Zoom and I've got a slightl problem i need some help with.

Basically as you will see from the DEMO i've setup, i am trying to find out if there is way to reinitialize the plugin when you click on a thumbnail or reset the data so that for taller images (the photo of the tower), the zoom window isn't using the dimension of the first image. (which i gather from what i can find out that it is doing)

Unfortunately i don't have the power to make the people using this format their images properly, so accounting for various heights of imagery is needed. Can it be done?

My Code, based on the demo file for the moment

<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="411"  />

<div id="gallery_01">

<a  href="#" class="elevatezoom-gallery active" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg">
<img src="images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image2.jpg" data-zoom-image="images/large/image2.jpg">
<img src="images/large/image2.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-image="images/large/image3.jpg" data-zoom-image="images/large/image3.jpg">
<img src="images/large/image3.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg">
<img src="images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image5.jpg" data-zoom-image="images/large/image5.jpg">
<img src="images/large/image5.jpg" width="100"  />
</a>

</div>

The jQuery

$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'crosshair', galleryActiveClass: "active", zoomType: "inner" }); 


var image = $('#gallery_01 a');
var zoomConfig = {  };
var zoomActive = false;

image.on('click', function(){

        $.removeData(image, 'elevateZoom');//remove zoom instance from image

        image.elevateZoom(zoomConfig);//initialise zoom

});

Side note

You might notice that I've made all the references to the images to the large file path, this is because in the way i need to use this plugin, the user will only be uploading a medium resolution file.

Answer 1

Not sure if this is what you asked for but a simple solution to remove zoom is by removing element data elevateZoom for the main image and destroy .zoomContainer elements. After updating zoom image element data you can re-instantiate elementZoom. However, if you want to keep the same image height for zoomContainer images you should consider having server-side image resizer and render them.

Here's a solution that I came up with:

var zoomConfig = {cursor: 'crosshair', zoomType: "inner" }; 
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');

zoomImage.elevateZoom(zoomConfig);//initialise zoom

image.on('click', function(){
    // Remove old instance od EZ
    $('.zoomContainer').remove();
    zoomImage.removeData('elevateZoom');
    // Update source for images
    zoomImage.attr('src', $(this).data('image'));
    zoomImage.data('zoom-image', $(this).data('zoom-image'));
    // Reinitialize EZ
    zoomImage.elevateZoom(zoomConfig);
});

P.S. Since you proposed using Click event, you can see I removed elavateZoom gallery functionality because it does pretty much a same thing if not used together with fancybox.

Answer 2

Use the built in gallery function and set the height of zoomContainer at every image change.

$("#gallery_01 a").click(function() {
    var myVar = setInterval(function(){ // wait for fading

        var height = $("#zoom_03").css("height");
        $(".zoomContainer").css("height", height);
        $(".zoomContainer .zoomWindow").css("height", height);

        clearInterval(myVar);
    }, 100);
});

Answer 3

If I tryly understand problem: width and height in zoom area must not changes after clicking on small images. If so,

 imageCrossfade: false, 

worked for me - image in zoom area preserve dimensions as I set for #zoom_03 in stylesheet.

Answer 4

In addition to Fülöp Gábors excellent answer, you can also set widths to get complete dimension resizing. This worked for me.

$("#gallery_01 a").click(function() {
            var myVar = setInterval(function(){ // wait for fading

                var height = $(".zoom_01").css("height");
                var width = $(".zoom_01").css("width");
                $(".zoomContainer").css("height", height);
                $(".zoomContainer").css("width", width);
                $(".zoomContainer .zoomWindow").css("height", height);
                $(".zoomContainer .zoomWindow").css("width", width);

                clearInterval(myVar);
            }, 100);
        });