Doidgey Doidgey - 6 days ago 9
jQuery Question

Elevate Zoom adjust zoom window for different sized imagery

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

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.

Comments