jackmoore / zoom Goto Github PK

Hi !

Thanks for this awesome plugin, it works really well on desktop.

Is there any chance to get it to work with mobile touch events, at least on iOS?

Is this plugin hosted somewhere on a CDN yet? There's no mention of it anywhere on the project page.

When using zoom's url property, FireFox's loading indicator will never stop if the image is uncached.

Here is the bug ticket for FireFox: https://bugzilla.mozilla.org/show_bug.cgi?id=463210

For some reason the zoomed image isn't fading in, it's only fading out. Tested with current versions of Safari and Chrome.

hi i'm use zoom plugin width flexslider but have problem if image small size not show full main left column

can fix image zoom width 100% ?

page problem : http://goo.gl/xVE8Z

many thank

Hi there,

First off - great plugin! I use it often and this is the first time I've run into trouble.

I seem to be having problems destroying a zoom instance. I have a demo page here:

http://dev.fashercise.com/product/nike-leggings/

and some sample JS here:

$(document).ready(function() {
    // Product image zoom
    $('#mainImage0').zoom();
    $(document).on("reset_image found_variation", function() {
        $('#mainImage0').trigger('zoom.destroy');     
        $('#mainImage0').zoom();        
    });
    // Product thumbnails
    $('#productThumbnails a').click(function() {
        var id = $(this).attr('href');
        var src = $(id+' img').attr('src');
        $('#mainImage0 img').attr('src', src);
        $('#mainImage0').trigger('zoom.destroy');
        $('#mainImage0').zoom();
        return false;
    });
});

In short, the zoom instance loads at the outset, then whenever 1 of 3 things happen, I have code that destroys the zoom then rebuilds it with the new image. The three things that can happen are: a) a thumbnail is clicked; b) the product dropdown choices on the right trigger the "found_variation" event; c) the product dropdown choices on the right trigger the "reset_image" event.

It seems like every time one of those 3 things happen, a new img with zoomImg is appended to "#mainImage0", so i just get more and more of them in the DOM. using Firebug's inspector I see that at page load up to 3 instances have appeared, because the "reset_image" and "found_variation" events fire (which i cant control - it's a third party e-commerce system).

Any idea why my destroy events aren't working and everything is loading repeatedly?

Thanks!

Is there a way to load the hi res image when the user clicks the thumbnail? I don't see it in the examples provided in the web. I want to save the user some KB.

I'm using the exact setup referenced here http://flexslider.woothemes.com/thumbnail-slider.html

I call zoom on ".flex-active-slide". It works on first load but when the image changes the zoom function doesn't

It would be nice if we could have multiple images, like @ http://www.magictoolbox.com/magiczoom/integration/#multiple

Hello.
The first example works as expected, but once touchend has been called further zooming is disabled.
The second example needs two touches two initiate the zoom, but otherwise works as expected.
Any help is most appreciated.

$('img').parent().zoom({callback:
      function(){
        $(this).on('touchend', function(){
            $(this).trigger('zoom.destroy');
        });
      }
    });

$('img').parent().on('touchstart', function(){
        $(this).parent().zoom({callback:
          function(){
            $(this).on('touchend', function(){
                $(this).trigger('zoom.destroy');
            });
          }
        });
    });

If you want to see the edges of the picture you have to move the mouse exactly to the edge of the zoomed image.
In this issue #36 you wrote, that it is too complex for you to add such a feature.

See the pull request, I hope I did it the right way, have no experience in using Github

Would be nice to have a setting to postpone the loading of the image until the zoom trigger is activated.

I would like to set the magnification after the callback, so I can set it based on the ratios of original image sizes to my viewport. Some of the images may be smaller than the viewport, so I need to magnify those.

How can I write this?
The trouble is with the last line (magnify:magnification). It's undefined and I don't know the syntax for setting the options after the callback. If you can.

    $('#parent').zoom({
        url: path, 
        duration: 120, 
        callback: function(){
          var w = $(this).width();
          var h = $(this).height();
          var pw = $('#parent').width();
          var ph = $('#parent').height();              
          if ( w<pw ) {
            var magnification = Math.ceil( (pw/w).toFixed(2) ) + .2; 
          } else if ( h<ph ) {
            var magnification = Math.ceil( (ph/h).toFixed(2) ) + .2; 
          } else {
            var magnification = 2;
          }
        },
        magnify: magnification
    });

Thanks!

First of all, thanks for this fantastic jQuery zoom!
The only problem that i've got is that on Firefox if I use a SVG picture it doesn't work :(.

Is there any fix for this?

A lot of the images i have are cropped pretty tight, so if i want to see the tip of the picture i have to be very careful when i move my mouse to any corner of the enlarged image to prevent it from un-zooming. Is there anyway to add extra mouse distance without the zoom closing? Hope that makes sense.

When I'm using zoom functionality, its working perfectly fine but I am not able to scroll down the page through image. The page doesnot scroll down when trying to scroll through image.
Please help!!!

Hi can you take a look here: http://openbci.com/index.php/gettingstarted

Only the picture at the bottom of the page will zoom.

I checked in the console and Zoom shows up on every element.

At first I thought it was because the last picture was the only .jpg and all the rest are .png, but I changed one of the others to .jpg and still no zoom.

Thanks for any help.

What is the best method to re-initialize the plug-in, e.g. after resizing the window?
$(#gallery div).trigger(zoom.destroy);
$(#gallery div).zoom(options);

Seems not to be very nice.

Hi there, I suppose this is more of a feature request, but I didn't see the tag option available.

I'm developing a product page for a major fashion retail corporation in nyc, looking to implement a quick zoom script when the user clicks on a scaled down version of the product image.

I'm curious if the script could be easily altered to vertically center the image when I call it like this. I could email you a link if you would like to check out how I'm currently utilizing it.

Thanks!

• Scott

Hey I have a Drupal client who is requesting your zoom feature on a colorbox image. I've tried versions of your example code for colorobx with no luck. This site is running jQuery 1.4.4 currently. The image in the colorbox is being 'duplicated' with the class="zoomImg", but when I hover the opacity doesn't change to 1, and the positioning stays at top:0 and left:0.

Here's the jQuery I'm using:
// zoom in colorbox?
$('a.colorbox').colorbox({
'onComplete': function(){
$('#cboxLoadedContent img').wrap('')
.css('display', 'block').parent().zoom();
$('.zoom').append('Hover');
}
});

Any ideas? Thanks so much for your help!

I'd like to do a hover zoom where the hover image doesn't change but another div/img gets the zoommed img instead.

Similar to amazon product pages: http://www.amazon.com/gp/product/B001RIY49M/ref=s9_simh_gw_p193_d0_i2?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=0EWN3H9MBRX1SJ75YB82&pf_rd_t=101&pf_rd_p=1389517282&pf_rd_i=507846

When you hover this item, it zooms filling a different portion of the page.

Any thoughts on how to accomplish this with a fork of your script?

My code was working fine, the click on zoom would zoom, and as soon as I moved my mouse the image would move.

I then moved the line:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

into the Head rather than in the Body and all of a sudden the click is working and the image is zooming, but now there is no movement at all.

Please can you help.

Thanks.

When "on" setting is set to "grab", right mouse button works like left mouse button. Is this occurs by mistake or it is unpreventable deliberately feature by developer of site? Please add a setting to prevent usage of right mouse button. Other than that thank you for this amazing plugin Mr. Moore.

First of all, I think it's awesome!

But I need to repeat the same zoom effect in my front page, så that 'ex3' can be used together with all my posts. Right now I'm only able to use each of the zoom effects one time, and all posts after that does not have the effect. Though they do show the zoom image and the correct pointer.

Any idea what I am doing wrong?

Is that possible to have the zoom picture move follow my touch point in same direction?
The plugin now doing is an invert direction, would you mind telling me how to do that? thanks, Jack!

Such a great plugin that works "right out of the box". Any way to get touch support for tablets and touch screens?

http://sp.thesrpr.com/product/houndstooth-single-breast-blazer-elliot-fit/

The plug-in is called on the main image. In Chrome Developer tools I can see the image I set at the zoom image in the markup. When I hover over the image I see the opacity of the zoom image change from 0 to 1 but nothing else happens.

It's not working on any of the images in the shop

Hello Jack,
First off all thank you for your script.

I am trying to use 'target' option, but whatever selector I'm trying to use console shoots error message: TypeError: Cannot read property 'position' of undefined

What I am trying to do is to use bigger container for zoomed image.
Here is an example:

Thank you for help in advance!

I might well be wrong with my solution but I'm having an error with the start and stop functions. The stop function is fading out all my images on my page, not just the zoomed img.

I think the problem is that line 97 [https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js#L97] should target $(img) rather than $img.

I have found that changing this target [and the same target in the stop function] fixes my issue.

[using Chrome 29.0.1530.2 canary Mac]

I guess, you set max-width: none, but not max-height, that's why there can be a problem, if max-height is set for in css

Once zoomed in, is there a way to freeze the magnifier on the currently magnified part once the mouse leaves the image frame?

This doesn't work.

$('#idImgZoom').zoom().mouseleave(function (e) {
e.preventDefault();
});

It hangs firefox.
I have 4 small images and on clicking on them i replace the original image and zoom image. But on mouseover it shows all images that i have clicked.

If the tag has its CSS set to height:auto!important; it breaks in IE10.

Removing !important solves the issue, but there are a number of responsive sites out there that declare this, as it seems to be considered good practice.

What happens is that, when you hover the image, the zoomed image simply top-aligns with the location of your mouse cursor, rather than pan around properly.

I want to get the effect of drag and drop.

Whenever I need to update the source to be zoomed I first destroy and than recreate the zoom.
Every time I recreate it some glitches occur (the page seems to reload and scroll at the top). Any way to avoid it?

Thanks

I have a large image (see http://dpldams.dev.chillco.com/islandora/object/islandora%3A580) which I'm using jquery zoom on (the image is 4239px x 2856px). When I try the zoom in Firefox (any OS), the image zooms correctly. However, if I try to zoom in any other browser, the image zooms somewhat differently and top:0 is actually outside the parent element. Going to the top left corner correctly goes to the left-most side but the "top" ends up at the middle of the image.

I'm not sure if this is a zoom issue w/ other browsers though I'm somewhat inclined to suspect it is at the moment since it does work correctly in one browser.

See:
http://liveweave.com/fVRBc8

Tried to destroy the event in safari yet it fails. works on chrome.

Hi. first of all, thanks for the brilliant code! It's great, simple and small!
Now the question. Would it be possible to add another click function to the script?

I mean, when click is enabled, to consider 3 possible variations:

1st click - enables the zoom
2nd click - stops the big image right after the click (puts the big image "in pause" and lets the user to move the mouse without moving the zoomed image
3rd click - disables the zoom

or perhaps it'll be easier to add this as a double click?
1st click - enables zoom
1st double click - holds zoomed image letting free the cursor
2nd double click - unholds the zoomed image
2nd click - disables the zoom

Thanks very much.

I see that you (or someone) have hosted files on jsDelivr CDN I don't see any installation instructions anywhere, so I'm not sure if they are needed.
If that file is needed, I would assume that it would be included inside the JavaScript file to reduce HTTP requests.

Tested how this little thing works and while it works nicely on desktop browsers, had some interesting problems on Mobile WebKit (iOS 5.0.1) running on iPad. When tapping image content area, it zooms to the one specific point but it isn't possible to move the zoomed image around. It could be possible with ontouchmove –type of event triggers.

Understandably there aren't support for touch based browsers at the moment. If someone is interested of trying to add that, there is more details on Safari Web Content Guide about differences in the way how WebKit handles touch based events.

Hey,
Was wondering what the acceptable values for magnify are.
Is 0.2 an acceptable value.
Is it possible to reduce the zoom factor to where it is less than the original image. I know this is the opposite but was just wondering.

Thanks for your time,
Cheers

I notice that the version on jsdelivr is out of date. Just wondering if you had any plans to update?

Much appreciate the plugin btw.

This thread suggests that when calling .outerWidth() on an image, the developer is expecting a number to be returned instead of an object.

If this is the case for your site, this thread shares that this issue occurs depending on which combination of jQuery and jQuery UI you are using. It also shares a few fixes: either change .outerWidth() to .width(), or change it to outerWidth(false). So replace all the .outerWidth() calls in the javascript accordingly (I found only 2). Then replace all the .outerHeight() calls in a similar fashion (again I found only 2). After that, this plugin started working for me!

The zoom works on mobiles and touch event, although there is one slight issue ( minor feature request? ;) which I feel would make it more user friendly. The problem is that the zoom stays "zoomed" even after I've finished touching the mobile. It would be much nicer if the image had zoomed back out to the original state, so that it can be zoomed again easily, while currently it requires two touches to zoom again.

Jack, do you know if there is a way to support responsive images for the zoom plugin?

I'm eager to try and find a way of getting it to work...

Any thoughts?

Niall

Tried to use zoom with small resolution image, there is screenshot when I move mouse over the image:

Maybe there should be an option to stop zooming if image size is too small to be zoomed.

If I initialize a zoomable image under the current cursor position, zooming does not work until I leave and the re-enter the image.

Here is an example:

$('body').on('click', function () {
    $('body').html($('#template').html()); // Adds HTML with #zoom markup
    $('#zoom').zoom();
});

http://jsfiddle.net/na4ywkfq/

I have not found a fix or a work-around yet.

Hi,
i want to use your zoom in my website,
but the product that i want to zoom it have 3 photos

I change the photos in javascript:
onmouseover="document.getElementById('bigpic').src = 'xxx.jpg';"

I initial your plugin in this syntax:
$(document).ready(function(){
$('#ex1').zoom({url: 'bigxxx.jpg'});
});

how can i pass the new big image to your function that the enlarge will be the right one?

Instead of triggering the zoom when you hover the mouse cursor over the image, it would be nice to have an option to trigger the zoom only when you click on a specified target. This would work nicely with your colorbox plugin so that you can have a magnifying glass icon on top of the image and trigger the zoom inside the colorbox only when the user clicks on this icon.