elevateweb / elevatezoom Goto Github PK

Is this possible? i can't get it to work. Works around the page but when I put the images inside a

Hello,

I've found 2 bugs that should be resolved with the following changes:

on line 125-126

+ "display: none;z-index:100"
+ "px;border: " + String(self.options.borderSize) 

should be

+ "display: none;z-index:100"
+ ";border: " + String(self.options.borderSize) 

because z-index does not need "px".

The second issue involves line 219

self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');

I added a z-index tp zoomContainer because the inner zoom was showing behind the main image in Chrome:

self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);z-index: 1000;position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');

Thanks.

Opera version: 12.12

You can see an example of this on the examples page: http://www.elevateweb.co.uk/image-zoom/examples

The last example with easing enabled doesn't work.

Oddly your easing example works in firefox but in my projects implementation easing seems to break in firefox too (Firefox version: 18.0.1). Maybe the two issues are related in someway.

Hi, I'm doing some tests here and I saw in your code that when the

"zoomType" = "window"

you just ignore the "lensSize" in your code. Is there any reason for that? I understand that you do some Math there, but as long as the lensSize is a valid size considering the container, why not use it?

thanks

Is it possible to manually trigger a position refresh on the zoomLens / zoomContainer?

 $('.zoomLens, .zoomContainer').trigger('mousemove');

doesn't affect anything.
Using the internal setPosition methods from an outside context doesn't work either.

The zoom image under the magnifier doesn't change when I choose different gallery links.

When I click on the gallery links, it gives an error: largeimage is not defined. The img under the .zoomLens div doesn't change source either.

I haven't been able to solve this for a while now, so any help would be much appreciated. Thanks in advance!

Hello everyone!

Don't if this is a bug or not, but im having some lag issues in firefox while zooming, it's very slow and looks terrible sometimes :( Can you please advice me with some tips/help to know what's really happening? Thanks a lot! And the plugin is totally awesome!

Hello,

I am using the zoomType lens and for some reason my lens goes outside my images when I move my mouse to end of the image.

Has anyone else experienced this?

Hi all,

Here's the situation:

I have a window zoom with an onImageClick function. When the user clicks on the image, an ajax post is sent to the server and some processing is done on the image. After the ajax call, I destroy the elevateZoom, reload the image (by changing the img src attribute), and reinitialize elevateZoom on the image.

The problem is that when elevateZoom is initialized, no zooming happens at all until the mouse is moved. What I am looking for is a way to get the zooming to activate (exactly where the cursor already is since the user just clicked it). I've tried several things over the last couple of hours, including trying to emulate mousemove events, and I just cannot get it to work.

Any suggestions on how I can manually trigger the zoom to begin immediately after (re)initialization?

I tried this:

$(".zoom").elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});

but the zoomWindowFadeOut doesn't seem to be working at all. This is also the case for the demo website.

Hello all,

Thanks for this awesome plugin. I want to know how to remove elevateZoom from a page ? I have a conflict between multi instance of elevateZoom (i want to use swapImage).

Thanks ;)

On mouse hover by image, zoom window opens immediately. But i think, this case very abrupt. Partially, this problem can be resolved by "zoomWindowFadeIn" option. But this still have showing transparently window if mouse fast flying on the page with thumbnails images.
I think, in many case zoom window must have some delay before was opening, it make showing zoom window more nicely and pretty.
Can you add support of "delay" option value to showing zoom window?

Hi
When i swap image using the gallery block $('.zoomWindowContainer > div') height didn`t change.

When multiple images on a single page, we're seeing inconsistent inner zooming.
http://www.travistile.com/products/P0
Each has a larger image which will either be locked at the top-left or will only scroll horizontally. Some will work properly, others will not. Not seeing any javascript errors.

Hey great plugin.
Was wondering how to control the factor for the zoomed image and also if it can be individually controlled for different images in a gallery.
I would like my first picture in the gallery to be 2x zoom and the second to be 1.5x.

Any help is appreiated.
Thank you

Windows 7 Chrome 32.0.1700.107 m & FireFox 27.0.1
Enabling easing and moving to far left of image (and waiting for easing to finish) causes the zoom to become unresponsive.
FireFox 27.0 Ubuntu 13.10
Enabling easing and moving to far left of image causes the zoom to jump to 0,0.

Both cases cause the easing window to become unresponsive.

Hello,

I would like to know if the plugin is responsive(appearance on small screens like mobiles).

The support forum has no option to register and post the queries

Thanks!

a.nzHeight has wrong size:

a.zoomContainer=d('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+a.nzOffset.left+"px;top:"+a.nzOffset.top+"px;height:"+a.nzHeight+"px;width:"+a.nzWidth+'px;">');

There seem to be no hooks for the onComplete callback function in the options to actually be called, unless I am missing something. I'd add it myself but I'm not entirely sure where it was intended to be used.

If you set the following options
zoomType: "lens"
containLensZoom: true
when you use the swaptheimage() function with a new image who has a different height (taller), the plugin doesn't work on the new part.

How can I reverse the direction of movement? After zooming into the image, when I move the mouse left, I want the zoomed image to move left, and when I move the mouse up, I want the zoomed image to move up. Is that possible? I don't know the code enough to add that option. Is there anyone smart enough to figure it out?

The zoomLevel option doesn't works when dealing with a gallery. There are bugs in v3.0.3

• On image load the zoom is not proper.
• After image change in gallery the zoom is not proper also blank image is shown on reaching the right & bottom edges.

I'm getting a 500 error when I try to download the repo. I've cloned it instead, but I thought you might like to know.

I noticed in the code a closeAll method.

Is there an example of how to use this?

Because the zoom containers are positioned absolute in the body element the zoom action also appears when a content in outside a scrolling area.

For example i have an element which is 900px high, it has a scroll bar because the content is higher than 900px.
If i hover outside the scrollable area i can zoom on an image because it is positioned absolute.

Could there be an option where to add the zoom containers for each image, for example referencing a class or id of an element.

Thanks

Hi,
can you pull this to master?
#33

Or is there any way we can set the parent element to be a certain id or class, instead of body?

I am implementing this plugin with RoyalSlider (Image gallery plugin), but elevateZoom is not working.
There is any option to work together?

Can i have 2 instance of the gallery plugin on a single page?

The following code doesn't work for me.

$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: ''});
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});

$("#zoom_04").elevateZoom({gallery:'gallery_02', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: ''});
$("#zoom_04").bind("click", function(e) {
var ez = $('#zoom_04').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});

Someone point me in the right direction.
Thanks in advance.

I have implemented in bootstrap 2.3.2,
I have placed some image in bootstrap Tab, when I tried to select tab button it not working, please check this issue

Hi there,

I wanted to know if there is a way to remove the zoom data on the thumb click and rein enable so that if i had different sized images, that the zoom window for inner zoom recalculates to the specific images which it is currently displaying. At the moment the inner zoom stays at the size of the first initial image by the looks of things. I need it to be more dynamic.. Any ideas?

Thanks

When I try to zoom in, the image becomes blurred and does not identify the pixels as per their value. Its as if some sort of aliasing is going on. Here's a sample image:

In Adobe Photoshop, here's a zoomed area at 1600

Whereas in an HTML page that utilize elevateweb, the zoomed image gets blurry rather than representing a pixel by a square of uniform color. Look at the top end of the letter F [Forte] and see the squares representing pixels at 1200 zoom.
In elevatezoom, a similar zoom window blurs:

the zoomWindowWidth is compared with itself on line 613. When the picture is smaller than the size set (default 400), the height is set to image size but not the width.

The correct code is:
if (self.nzHeight < self.options.zoomWindowWidth / self.widthRatio) { ....

when useing it on RTL Site it didn't Support Direction

Here is my example:
http://projetos.agenciamilagro.com.br/teste-milagro/zoomteste/

If the zoomed image is bigger than 1869 pixels wide (maybe it's the height that's the problem), then the zooming becomes inconsistent with the finger moving. Apparently there's a problem with the calculation of the background-image position. It works if images are smaller.

Hi I want to use elevatezoom with flexslider but cant seem to get it working, any suggestions??

Hello,

Maybe the problem is that I don't understand something, but I cannot seem to get the lightbox functionality to work. The zoom is OK, but when I click on the main large image the larger version of it is supposed to open in a lightbox popup and it doesn't. Any help would be appreciated, thank you.

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'
    });

Hi! On the Website (http://www.elevateweb.co.uk/image-zoom) in the download section. There is an old version of the script linked (V 2.5.5)

Maybe link this to the github page or the github master download (https://github.com/elevateweb/elevatezoom/archive/master.zip)

I just noticed that on FF 22.0 the plugin is not very smooth: when I move the mouse over the image the box lag and the zoom image too.
On Chrome everything looks fine

Right now, on mobile touch enabled devices, we have to first tap, then pan around for the zoom to take effect. If we simply touch and start dragging, the zoom is not functioning but rather iPad/iPhone ask to copy/paste by selecting the div container.

Any idea how we can get it to work without having to first tap and then pan around? We should be able to touch and zoom immediately (i.e don't need to lift finger off the screen with a first tap on the screen first).

If set, the spinner image is being added after the main image and becomes under that rather than on top of it. You need to add 'left: 0; top: 0' next to 'position: absolute style';

Next, once the image is loaded, the spinner just becomes hidden, but if try to change image again, a new spinner is being created instead of using the existing one. Thus a lot of duplicate spinners are being created in DOM.

two or more images are loaded on a div and show only images when prev or next button clicks , that images zoom when hover that ,problem is zoom outside the called area

To save bandwidth, I've initialized the plugin on hover of the original image rather than on page load:

$(".product-zoom-image").hover(function ()
{
    $(this).css('cursor', 'wait');
    $(this).elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        onZoomedImageLoaded: function ()
        {
            $(".product-zoom-image").css('cursor', 'pointer');
            // Need something here start the zoom if the mouse is already over the image
        }
    });
});

However, after the image is loaded, I need some way to trigger the zoom because you have to move the mouse off the image and then back on to trigger the effect. Ideally, what I'd like is a "loadOnDemand: true" setting that would just load the image on the first hover and how a progress indicator while its loading.

Thanks!

see for an elaboration of the hover issue combined with the problem of elevateZoom triggering on hidden images:
http://stackoverflow.com/questions/21234070/elevatezoom-disable-hidden-elements/23414384#23414384

It seems like a simple typo to me. I'm new to github and am not very familiar with how to search for issues, but I used the search bar for "offet" and couldn't find anything. Anyways, this is a very nice plugin.

Hello
Is there a way to programmatically emulate selecting (click) a thumb from gallery? Any API for this? I've tried .trigger('click') but getting many errors like "TypeError: self.zoomWindow is undefined"

Thanks!

I've successfully used flexslider with elevatezoom and Magnific Popup.

I use flexslider to display a gallery of images (one main image, with thumbnails underneath). I use elevatezoom to "inner zoom" the main image. Finally, I use Magnific Popup for when the main image is clicked while the inner zoom is running, to pop-up a very large image.

Everything works great, IE8 to IE11, Firefox, Opera, etc. Unfortunately, Chrome does not enable elevatezoom at all and no javascript errors are reported in the console. All other scripts work fine.

I use ElevateZoom in my project. Thank you at first.
My website use both protocols, http and https.
ElevateZoom works fine in http, but when I switch to https, it doesn't work properly anymore.

Its zoom container's height is set to 0.
E.g:

<div class="zoomContainer" style="-webkit-transform: translateZ(0px); position: absolute; z-index: 2002; left: 882.5px; top: 110px; height: 629px; width: 493px;">

<div class="zoomLens" style="float: right; overflow: hidden; z-index: 999; -webkit-transform: translateZ(0px); opacity: 0.4; zoom: 1; width: 279.3666666666667px; height: 0px; background-color: white; cursor: crosshair; border: 1px solid rgb(0, 0, 0); position: absolute; left: 97px; top: 197px; display: block; background-position: 0px 0px; background-repeat: no-repeat no-repeat;">&nbsp;</div>

<div class="zoomWindowContainer" style="width: 493px;">

<div style="z-index: 999; overflow: hidden; text-align: center; background-color: rgb(255, 255, 255); width: 493px; height: 0px; float: left; background-size: 870px 1110px; border: 1px solid rgb(204, 204, 204); position: absolute; background-image: url(https://www.example.com/image4xxl_4.jpg); top: 0px; left: 523px; display: block; background-position: -171.85294117647055px -347.6470588235294px; background-repeat: no-repeat no-repeat;" class="zoomWindow">&nbsp;</div>

</div>

</div>

Please check it.
Thank you.