Option to remove remove the zoom from the specific image ?

[shivarajnaidu]

How to remove the zoom for specific image when i want to ?

[ratulSharker]

I faced the similar issue, while working with a carousel / slider library with elevatezoom-plus.

Note that, elevatezoom-plus already support such feature (Colorbox Gallery Example), but i have to use it with Slick Slider.

My problem was, when i click / select separate image from the carousel, i have to show that selected image and hover effect on that image have to render that image with elevate zoom effect.

I have solved mine by following

// `img` is the image HTMLElement from which i want to remove elevate-zoom effect
$.removeData($(img), "ezPlus");
$('.zoomContainer').remove();

I know this implementation might not work for you because of following

• If multiple image has elevate-zoom effect, it will remove all the elevate-zoom effect from the window, because there is no identifier, for which image that particular elevate-zoom effect is being shown.

Proper way would be maintaining an identifier (may be in data attribute in both img element and the zoomContainer to know, which zoomContainer to remove for which image).

I would be glad to give an PR implementing that, if the maintainers allows.

[larrynalzaro]

THE EASIEST solution is to edit the plugin itself.

1. Add a new property, like so:

self.dom_index = self.$elem.data('zoom-index');

2. Then go and locate the zoomContainer definition and modify it like so:

self.zoomContainer =
                $('<div class="zoomContainer zoomContainer-' + self.dom_index + '" style="' +
                    'position:absolute;' +
                    'left:' + self.nzOffset.left + 'px;' +
                    'top:' + self.nzOffset.top + 'px;' +
                    'height:' + self.nzHeight + 'px;' + '' +
                    'width:' + self.nzWidth + 'px;' +
                    'z-index:' + self.options.zIndex + '"></div>');

3. Now you have a reference point for each zoomContainer.

w00t,
You are welcome :)