dams-dev / smartjqueryzoom Goto Github PK

Thank you for smartJQueryZoom!
Results in Firefox are perfect, but Safari gives poor, blurry zooms.
We divide our large image into 6 tiles and scale them down to 1/4 size.

div id="imageFullScreen"
div id="allimageparts"
img src="images/zoom1.jpg" width="400" height="400" alt="." /
img src="images/zoom2.jpg" width="400" height="400" alt="." /
img src="images/zoom3.jpg" width="400" height="400" alt="." /
img src="images/zoom4.jpg" width="400" height="400" alt="." /
img src="images/zoom5.jpg" width="400" height="400" alt="." /
img src="images/zoom6.jpg" width="400" height="400" alt="." /
/div
/div

Our tiles are all 1600px x 1600px

We scale up to 'maxScale':4 and the result is perfect in Firefox, but ugly blurry in Safari, Webkit.

Any idea or hints would be great.

Thank you,
elEglon

Hello,

I am using this library along with dragabble/droppable from jQuery. After using the zoom plugin, the draggable becomes unusable. I think it is because of this line:

document.ondragstart = function () { return false; }; // allow to remove browser default drag behaviour

The destroy method does not re-set the document.ondragstart to it's original value. Is this intended?

Clicking on svg paths it should invoke a separate js function.
I am not able to do that.
Please give a solution for this.

When "css3dSupported" is false in line 781 no object will be generated and the return value of "getBrowserTransitionObject" wille subsequently be "null". This is the case in every browser that does not support "translate3d", in this here case IE9.

Since the object is "null" in line 652 "if (smartData.transitionObject != null)" will evaluate to false, thus the else case in lines 660/661 will never be executed as it will only be executed when "smartData.transitionObject != null" and "smartData.transitionObject.css3dSupported == false", an unreachable state as the first prevents the later.

Based on this "translateX" in line 661 will never be executed -> Content not scaled to Container in IE9.

I hope this helps fixing the issue,
thank you in advance.

Hi all,
I try to embed the realy smart smartJQueryZoom into a swiper-Structure (using https://github.com/nolimits4web/Swiper). On swiped layers the zoom runs to the bottom of my page, only on the first slide it works as desired. :(
Thank you for any help concerning the control of the containers position.
Eglon

Snippet

First of all, thank you for creating such an awesome tool with mobile support.

I am actually trying to get the coordinates of an image (x1, y1, x2, y2, width, height) either it is in static position or during zoom and pan. I tried to figure out your code but I did not find any place or piece of code which could help me to get this info.

I will appreciate your help if you could help me to find out the require info plus if you add a default functionality for getting the coordinates of an image (like this plugin http://benlumley.co.uk/dev/panzoom/example/index.html) than it would be another great addition in the plugin.

I'm using the smartzoom jquery plugin, and it seems to work fine on my jsfiddle using jQuery 1.8.3, but if I use jQuery 1.9.1 (and include the Migrate 1.1 plugin for compatibility), I get some strange behaviour.

What happens is when I resize the bottom-right frame in the jsFiddle, the div that smartzoom creates grows in size, even if I reduce the size of the frame back. Any alteration in the frame's size causes the div to grow, resulting in the image drifting further down the page.

Here's my jsFiddle to demonstrate this: http://jsfiddle.net/76wgC/4/

Events which are bound to child-elements of my smartzoom-element get lost after initialisation.
This is caused by the call of jQuery.remove() in line 94. It removes all assosiated data and events from the element and all the children.

So to improve the library for compatibility with other use cases it is recommended to use jQuery.detach() instead to keep all assosiated events and data after removing from DOM and appending in line 99.

I only have android devices to test this,
but in your demo example, when its in fullscreen it works ok ( a bit glitchy to get started, but otherwise basically working)
however, when I try to simply zoom or pan the image when its not fullscreen,
no visible change occurs until touch end. occurs for both zoom and pan.

It does not work in a surface with IE11 and touch. I think we should bind pointer events

Hi,
I'm trying to do something like this:
$targetEl.smartZoom({'containerClass':'cropFrame'});
var containerDiv= $targetEl.data('smartZoomData').containerDiv;
...
I want a reference to the containerDiv so that I can attach controls and event handlers to it.
Unfortunately because I also pass an initialiser object to smartZoom and my target is an image, it does not initialize immediately, but delegates to an event handler. this means that the .data object isn't always initialised yet when the .smartZoom call returns.

Do you have any advice as to how I might best work around this?
thanks

I need to have a bottom bar in my website, the problem is the image takes up the entire screen. If I set 'height' : '70%' then what happens is it works good on my desktop res but as soon as I try out smaller window sizes like a mobile device, the image either takes up entire screen or somehow cuts in half? How can I solve this problem so its perfect on all resolutions?

Hi all,

smartJQueryZoom works smooth with images, but it's extremely slow on mobile with HTML content. There's a 200-300 msec delay between finger move and the content move. Zoom is smooth, but panning is not.

Any ideas hot make in smoother?

The link for the demo (http://ww3.e-smartdev.com/#!jsPluginList/panAndZoomJQuery) is no longer available.

I start out with an image target looking like this:

<img id="blah" src="some.jpg" alt="your image" >

after intializing smartZoom, and then
after calling smartZoom("destroy") my image is left looking like this:

<img id="blah" src="some.jpg" alt="your image" style="transition: all 0.005s ease-out; 
-webkit-transition: all 0.005s ease-out; 
-webkit-transform: translate3d(0px, -1290px, 0px) scale3d(1, 1, 1); 
cursor: default; -webkit-transform-origin: 0px 0px; visibility: visible;">

so the image is neither restored, nor is it left looking like it was after pan/zoom.
instead its height is severely culled and the whole image shrinks to the top of my page.

I'd rather specify the new position than add or remove pixels from the pan position, which doesn't seem possible to me, so I created the following function to enable this feature.
Feel free to edit and/or integrate.

    /**
      * panto function accessible via direct call (ex : $('#zoomImage').smartZoom('panto', 5, 0);)
      * @param {Number} xPos : a number to move the object current position in X
      * @param {Point} yToAdd : a number to move the object current position in Y
      * @param {Number} duration : move effect duration 700ms by default
      */
    panto : function(xPos, yPos, duration){
        if(xPos == null || yPos == null) // check params
            return;

        if(duration == null) // default pan duration is 700ms
            duration = 700;

        var currentPosition = targetElement.offset();

        var targetRect = getTargetRect();
        var validPosition = getValidTargetElementPosition(xPos, yPos, targetRect.width, targetRect.height); // add the given numbers to the current coordinates and valid the result

        if(validPosition.x != currentPosition.left || validPosition.y != currentPosition.top){
            // stop previous effect before make calculation
            stopAnim(ESmartZoomEvent.PAN);
            moveOnMotion(xPos, yPos, duration);
        }
    },

When I am using smartZoom plugin i can't scroll page on touch devices (ipad, iphone) when i scroll through image. On desktop it works fine with mouse wheel.

Wen i am using Smart zoom I am not able to scroll down the page through image also how to lock the slider wen image is been zoomed

Firefox 34.
On demo work fine. But on my site build with bootstrap 2 not work, no js error or warning. But in css warning is "error on parse value for 'transform'. Missing declaration'

What is wrong ?
Thx

when i am implementing plugin for zoom ,by default the zoom out is too much which makes it to small to view.

how to resolve it.

I am using below code :

        $(document).ready(function() {

            $('#canvas').smartZoom({'containerClass':'zoomableContainer'});

            $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
            $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);

            function zoomButtonClickHandler(e){
                var scaleToAdd = 20;

                if(e.target.id == 'zoomOutButton')
                    scaleToAdd = -scaleToAdd;
                $('#canvas').smartZoom('zoom', scaleToAdd);
            }

            function moveButtonClickHandler(e){
                var pixelsToMoveOnX = 0;
                var pixelsToMoveOnY = 0;

                switch(e.target.id){
                    case "leftPositionMap":
                        pixelsToMoveOnX = 100;  
                    break;
                    case "rightPositionMap":
                        pixelsToMoveOnX = -50;
                    break;
                    case "topPositionMap":
                        pixelsToMoveOnY = 50;   
                    break;
                    case "bottomPositionMap":
                        pixelsToMoveOnY = -50;  
                    break;
                }
                $('#canvas').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
            }

        });

Hi there,
I'm trying to use this plugin with images that are smaller than the target container. (avatars in a container big enough to manipulate)
I'd like to scale up the images so that they are properly adjusted to fit/fill by the smallest dimension, and are never able to shrink smaller than the container.
the adjustToContainer method, only seems to cater to the case where the image is larger, otherwise it always calculates a scale of 1, where a scale of >1 is what I want to lock in as a minimum (I think).
what's the best way to 'fill' an image into the container so that the image always consumes the entire container, and cannot ever be dragged/zoomed to show background?

Cheers

Hi, thanks for the nice plugin,
I have been tinkering with it in chrome & firefox, but could not fathom why it would not work in my own html. eventually I narrowed it to this:
in your own example, if you leave out the css then panning wont work (in chrome & ff at least).
restoring this single entry allows panning to work again:
html, body {margin:0;}

in fact setting the margin to anything but zero doesn't work either, nor does it have any effect unless its on the body element.

I hope either this dependency gets fixed, or at least this comment helps someone else out.

Cheers

Some of my images load with small top/bottom or side margins. You can see this behavior in your own full screen example. Depending on the browser's window size sometimes you don’t see this issue right away. If that’s the case then try resizing the window slowly and you will see these margins appear/disappear depending on the window's size. If you stop resizing just at the right time you may see margins on all four sides. Is there a way to get rid of them? Thank you.

Has an unnecessary double quotes in file https://github.com/e-smartdev/smartJQueryZoom/blob/master/src/e-smart-zoom-jquery.js#L74

first time zooming png image works and when zooming it zooms in center,if i referesh the page and zoomin,the zoom does not zoom in center for second time

Not sure why this has been left out, but you should add the "zoomOnSimpleClick" option to the docs.

Hi guys,

smartJQueryZoom is support to angularjs frame work.

Can you assign a .smartZoom(); to two different objects with two different options?

On iPhone device When load html with iframe it seems not initiate correctly. The BIG image in the html does not resized. And the same code works fine not using iframe. Also both are satisfied on PC.
And there is another problem, jQuery not support PASSIVE option when add event listener, so in some circumstances e.preventDefault will not works.cause the page can not drag.

if css transitions aren't detected (in chrome or firefox, haven't tried others),
then the jquery zooming fallback works, but not the jquery panning.

Hi,

i want to use reset option for png images displayed in IE8.is there any option for reset in e-smat jquery zom plugin.

Hello,

First of all this is an awesome plugin. The mobile support is great! I was wondering if it would be possible to add markers to the container so that they would be stationary on top of the image, like the markers in Google Maps.

Just curious! Thanks :)

when using a responsive container, if the window size changes, all zoom/pan modifications made by the user are lost and the control resets.

Hi,

Love you script BTW.

EDIT: I'm not sure the problem resides in what I explain but I guess it's something like that sinze HTML2CANVAS render the image based on the css.

I'm using this with HTML2CANVAS i'm having an issue related to the transform-origin. When html2canvas render the page he recognize the transform-origin wich is always 0 0 wich make the image to be in the wrong position.

I´ve tried to manipulate the script but somehow if I remove that property he doesnt work. Aswell if I try to manipulate it by change the left top dynamicly he also doenst work properly( The PanAndZoom itself ).. Is there anyway to use the script without this property since it's always 0 0 ?

Many thanks.

Hi,
I have used the e-smartdev zoom library with swiper master slider.
zoom and slider work fine. But sometimes it doesn't show the UI elements on the gallery when I check this with an Android tablet. (zoom is working)
Like pagination, arrow navigation. And I have used some my own buttons to interact. All are disappearing with zoom image load. What is the problem with it.
Please help me...
The slider I have used
https://github.com/nolimits4web/Swiper

Thanks alot.

ready结束，启动插件，默认缩放了图片的大小，使用$('#imageFull').smartZoom('zoom', ‘1’)放大图片，没有生效。并且报错“Cannot read property 'containerDiv' of undefined”。