674 comments found.
normWidth measured BADLY on iOS. Hello, on android everything works fine, but when I try to load an image from iOS, I can see that the image size image.naturalWidth is 960, height is 1280, however when doing getZoomData it returns normWidth 159 and normHeight 1280 EVEN TOUGH i have specified explicitly it in the image_original_width, image_original_height parameters.
ANY IDEAS TO MAKE THIS WORK?
The 159px is actually the size of the canvas the image was drawn onto, nevertheless the code was:
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext('2d').drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
callback({imageURI: canvas.toDataURL('image/png'), width: this.naturalWidth, height: this.naturalHeight});
canvas = null;
};Hello, I have just purchased this plugin. Everything works fine except from when I load an image taken with mobile camera it incorrectly measures width and height properly scaleX however when I load the exact same image from the gallery it works fine. Any ideas? I am using it like this:
$('#image').smoothZoom('destroy').smoothZoom({
zoom_OUT_TO_FIT: true,
zoom_BUTTONS_SHOW: false,
pan_BUTTONS_SHOW: false,
zoom_MAX: 500,
animation_SMOOTHNESS: 3,
animation_SPEED_ZOOM: 7,
animation_SPEED_PAN: 7,
zoom_MIN: 10,
image_url: imageURI
});Setting image_original_width or height not helped. Changing zoom_OUT_TO_FIT did not make any difference. Calling before and/or after .smoothZoom(‘Reset’); did not help.
In the bad case, when the first image is loaded into the div after taken from camera the getZoomData returns centerX: 640 centerY: 360 normHeight: 720 normWidth: 1280 normX: “0.00000000000000” normY: “-362.25705329153607” ratio: 0.24921875 scaledHeight: 179.4375 scaledWidth: 319 scaledX: -0 scaledY: -90.28125
In th good case it returns centerX: 640 centerY: 360.00000000000006 normHeight: 720 normWidth: 1280 normX: “0.00000000000000” normY: “-927.15083798882688” ratio: 0.13984375 scaledHeight: 100.68749999999999 scaledWidth: 179 scaledX: -0 scaledY: -129.6562
Both cases the images are the very same base64 png images with same exif data.
And it happens randomly.
Any ideas?
I was able to solve this one, by setting a wait time, because when the phone returns from camera mode to the webview, the dom is mixed up and measurements are blown away.
I’ve integrated Smooth Zoom successfully. I’ve got 1 question: how can I change the ammount of zoom applied when pressing the zoom in/out button.
Same issue as jmatz. Zoom buttons no longer work.
@jmille007,
jmatz pointed the issues in Windows 10. I already tested the preview and download packages in Windows 10 and it works fine. If you can send me the link to your implementation and I will check it. Also please mention about the browser and operating system details.
It seems the error is in Chrome on windows 10. The zoom and pan buttons do not work on your demo http://vectorflower.com/preview/smooth_zoom/full_screen.html. The demo does work with microsoft edge.
I checked the same page on Chrome (and all browsers) on Windows 10 and couldn’t reproduce the error. I will check it later in another computer. Meanwhile, if possible, can you send me the screenshot of Chrome’s inspect page. Just right click the page and click Inspect and it should show the errors if any.
Stopped working for me in the latest Firefox, Chrome and Opera on Windows 10… Only the image map and the mouse wheel (to zoom) works.
I want to add dynamically marks in example 5. But how can I get exact data-position? Is there any way or must I try one by one?
- Fit to width -> auto zoom based on the image width
- align to top/bottom after initialization (image already shown)
Hi, just bought the script. I can’t use it on IE 9, the function line 1167 is rejected because it uses a null or undefined reference… Does anyone have an idea ? Best
Just bought the script. In comments, I have saw that this script support image map (<map><area>). I did a test and it is working well with a mouse: I can click on area and I am getting to the url. But it doesn’t work on a touch screen. I have tested on my tablet and I cannot touch an area to being link to the page. Is there a param that I must set to make image map working on a touch screen? I’m on Chrome 47.0.2526.106 m
With Chrome 46.0.2490.86 it has some sort of touchscreen related problem: the zoom and pan buttons, and panning with mouse are not working. Disabling touchscreen support on chrome://flags solves the problem, but what it’s a dirty hack, and should be solved.
This doesn’t work in Chrome 45.0.2454.93.
The click function is now working in chrome. It not working on your Live Preview or on my page. Do you have an update?
I’m using this plugin to zoom a div, however I encountered an issue where firebug was reporting a 404 (undefined). After a bit of digging I found we’re creating an image even if it doesn’t exist. The get around this issue I’ve added a check to see if we need to add the main image, if we don’t initialise without adding the image as we don’t need that step;
Change;
$.each(this.imgList, function (i){
var _img = new Image();
$(_img) .bind('load', {id:i, self: self}, self.loadComplete)
.bind('error', {id:i, self: self}, self.loadComplete); //Allow initiation even if image is not there 
_img.src = self.imgList[i].src;
});
To;
$.each(this.imgList, function (i) {
if (self.imgList[i].src === undefined) {
self.loadComplete({ data: { id: i, self: self } });
} else {
var _img = new Image();
$(_img).bind('load', { id: i, self: self }, self.loadComplete)
.bind('error', { id: i, self: self }, self.loadComplete);
_img.src = self.imgList[i].src;
}
});
I hope this helps someone.
Hi, It’s possible to drag image only with one axe ?
Exmple:
mouse_DRAG_Y: true,
mouse_DRAG_X: false
Thanks in Advance!
The image I am using to zoom into seems to be getting resampled to a much lower resolution. How do I use the original resolution of the image. Thanks.
so, I see that the use_3D_transform is doing this… and it REALLY helps with the performance… so… can we have the use_3D_transform TRUE while zooming and panning… and onComplete, snap in the full rez image? This would be the best of both worlds.
Hi – would this work on this map http://bneiakiva.net/shlichut/map.html ?
Would the hover effect be lost when zoomed in?
Is this still supported? I have tried emailing and posting here but no response from the developer. It has been over two months now.
It’s working only with images or with div’s too ?
Hi, I have some trouble while using big images. I’m using the responsive configuration, and the focusTo method to animate the image in the background. The problem is probably connected to webkit, because in firefox everything works well. Please can anyone help me??
Thanks
I am having trouble with this plugin in a responsive site. When resizing the window, the image inside the zoom container shifts to the left. Both the container and the image resize correctly, but the image is shifted. I am using simple code: jQuery(function ($) { $(’#ZooImage’).smoothZoom({ responsive: true, responsive_maintain_ratio: true, max_WIDTH: ’’, max_HEIGHT: ‘474’ }); });
is there something I am missing ? that is required for this to work?
