timmywil / panzoom Goto Github PK

Hi, I was working with the library and suddenly found that some select box inside the panzoom area had stopped working.

As I'm in some hurry, I've fixed adding in the _bind function a conditional to disable the preventDefault and the stopPropagation when the event target.tagName is the select, and it works (if you pan when the select is open the dropdow don't pan, but I'll have to live with that), but there must be a better way.

Maybe you knew about this. I'll try some other way later at home when I have more time

Hello again :-)

Is it possible to have the following scenario (it is for mobile devices..):
The viewport being width 100% and height 80% and the panning/zooming image to be contained that area, but with its minimum dimension not to be smaller than the viewport dimensions.. That is, in it's initial state the image would be scaled accordingly to fit that box.. and never being smaller than it.

Any ideas?

Thanks a lot.

I'm having quite a hard time setting up zooming by mousewheel. I can zoom/zoomout just fine by binding to the mousewheel event and executing

$panzoom.panzoom("zoom", true, { middle: $mid });

The problem is getting it to gravitate to the mouse location. What "point" should the middle option be? Should it be a point relative to the div i'm zooming? Should it be relative to the middle of the div? Maybe a specific example of that would be awesome!

Some experimenting has me suspecting that "contain invert" panzooms might need to have this line (roughly near line 600):

var offsetM = new Matrix( 1, 0, o.left - this.$doc.scrollLeft(), 0, 1, o.top - this.$doc.scrollTop() );

changed to this:

var offsetM = new Matrix( 1, 0, 0, 0, 1, 0 );

The latter keeps the focal point where I specify (in this case, passing the values via "clientX" and "clientY" on the zoom method). The original introduces an X, Y error which is related to the parent offset values.

Thanks again for your continued efforts.

I have been trying to bound panning to the image only but it keeps going beyond it. I am using a jpeg image instead of a SVG. I am new to jquery, could you guide me on how to do this?

It would be nice to have an option that overwrites the touchSupported value.

My application is based on jQuery mobile and PhoneGap, I don't target any desktop browsers without touch support.

I presume it doesn't currently have support for double tapping to zoom (the default action for images on iOS), to implement this would I have to setup a listener for it and trigger the zooming manually?

I have tried the mousewheel focal point zooming demo (http://timmywil.github.io/jquery.panzoom/demo/) in FF on a mac and PC and it doesn't work in either. Looks like the mousewheel.focal event isnt being triggered/picked up

First of all, awesome plugin! Thanks for making this!

I have some circles inside my SVG that I want to take action on when touched/clicked. I don't want to take action on them if they're touched as part of a pan or pinch gesture.

I have tried following approach, however I can't see any way that I would actually get a reference to the drawing element that was clicked with these arguments. I only get a reference to the SVG itself:

onEnd: function(e,panzoom,matrix,changed) {
if (changed === false) {
// call function to deal with clicks or taps
// don't know what was actually clicked though
}

As a result I am using this approach which basically works, but at the end of a pan or zoom event this code always gets fired. I end up taking action on the circle even though the user probably didn't really want to select it--they were just panning.

$panZoom.on("click touchend", function (e) {
if (e.target.localName == "circle") {
//they clicked a circle--do something
}
});

Thanks for the help!

Hi !
Thanks a lot for your plugin, it's really cool.

I'm trying to control events by scale levels.

This is an exemple
http://jsfiddle.net/Dgbdd/1/

I just want that, when the zoom scale is on 1,2,3,4, it will shows differents phrases on the right.
How can i say that ?

Thanks a lot !

At the moment, zooming using buttons passed in as $zoomIn and $zoomOut options seems to set the focal point of the zoom to be the center of the element that is being panzoom-ed. Would a more natural behaviour be to set the focal point of the transition to be the center point of the container element?

The current implementation gives the impression that panning is taking place as well as zooming: http://codepen.io/adrianosmond/pen/oqszy

Please add support for an event that will move the item, like this:

$('.panLeft').click(function() {
 $("#panzoom").panzoom("panTo", -10, 10 , true);
 // Should move the item 10 units to the left and 10 units down
});

Hi Timmy - this is an awesome lib, thank you.

I have an issue when the parent resizes and lets you drag way beyond where you should be able to with the child given it's in a contained mode.

I've modified your contain / invert example if you can take a look.

http://codepen.io/anon/pen/xrGki

If you scroll the tiger so you're looking at the bottom right corner, then click "Resize Up" you'll see a lot of red at the bototm. Resize down again and you'll get red on the sides.

I'm not sure whether this is something that requires a mod in your code, I've tried all sorts of things on my side of the fence to counter it but have yet to crack it.

In my app I start off with a small div and have a "resize" to full screen which fills the client window, but then it lets you drag the child way off the viewport.

Thanks in advance - John

First of all this plugin rocks. I don't know if I would classify this as an issue so if this is wasting time I apologize. As I've had people use this on the desktop for essentially a document editor they would like to still have scroll bars on the parent div / container (essentially panning by scrolling). I am willing to dive into the code and do it myself but I was wondering if there are any "word to the wise" in doing so or if there is an easy work around already for this already.

Zooming on mobile (via pinch) seems like hard work by default and I was wondering how I could speed up zooming, I tried the following:

clickedInfographic.panzoom({
                        contain: 'invert',
                        minScale: 1,
                        increment: 2,
                        duration: 5,
                        transition: false
                    });

But it didn't make a lot of difference, anything else I can try?

LOVE this library btw thank you :D

If i set contain property on "invert", then i can't pan my container programmatically.
This is my code to pan the container:
$(this).panzoom("pan", -81, 54, { relative: true });
When the contain property is false, it's working properly, but in "invert" mode, it's not working any more.

Thanks For your amazing plugin.

When zooming at the top of a long image, the image disappears down the page, because it zooms around the center of the image, not where my fingers are placed on screen. Would be nice if it felt like I was "holding" the image with my fingertips (like zooming in a map application does).

I'd like the focal point be the top-left corner of the image, instead of the center.
I wrote this code - which works fine:

$(image).panzoom({
   $zoomIn: $("#zoom_in_btn"),
   $zoomOut: $("#zoom_out_btn"),
   focal: {clientX:0, clientY:0},
   animate: true,
   contain: 'invert'
});

My Question: is this the "best" way of achieving this?

Hi Timmy and thanks for the great work!

No problem on browsers but on ios I have a serious bug (spent 3 days now so crying for help):

--- I instantiate panzoom ---
$("#panzoom").panzoom(
{
$zoomIn: $("#zoomin").on("click"),
$zoomOut: $("#zoomout").on("click"),
maxScale: 1.2,
minScale: largestSide/backgroundSize,
increment: 0.05
});
// Compute starting zoom
$("#panzoom").panzoom("zoom",largestSide/backgroundSize);
// Make panzoom draggable
$("#panzoom").draggable({scroll: false});
// Reposition
reposition();
....

--- I use jquery animate to reposition my image after initial zoom ---
function reposition()
{
dragtoplimit = screenh-(backgroundSize_zscale);
dragleftlimit = (screenw-thumbw)-(backgroundSize_zscale);
if ($("#panzoom").offset().top > 0)
{
$("#panzoom").animate({ "top": "-="+$("#panzoom").offset().top+"px" }, "fast" );
}
....

On ios I'm not sure what's happening with the viewport and the jquery positioning but when I try to pan or zoom the image I stay stuck on the initial-zoom Y-positioning??

What am I doing wrong? please help, I don't want to rewrite drag or touch events because I'm sure you did it well but I am missing something.

Nicolas.

This is not a bug, just a (hopefully) helpful hint for other panzoom users...

Since all clicks, taps, moves or drags on the panzoom object trigger the "onEnd" option, and clicks or taps will return a "false" to the changed parameter, you can do this:

onEnd: function(e,panzoom,matrix,changed) {
   if (changed === false) {
      // call function to deal with clicks or taps
   } else {
      // call function to work with drags or touch moves
   }
},

This is probably very obvious to most of y'all, but took me awhile to figure out. Hope this saves someone a bit of time.

We can calculate the minimum scale required to ensure the panzoom element is large enough to keep the parent container invisible. This may not always be ideal, but it could be an option with the default set to true.

If i want zoom on exactly clicked point, what should i do?
You have focal on zoom for mouse wheel but i need it on click event.

Thanks in advanced.

Thanks for adding the pan feature!
Could you please extend it to support animation, just as "reset" already does?
pan(x, y, [options], [animate])

Arguments
x - {Number}: X Coordinate
y - {Number}: Y Coordinate
options - {Object}: These options are also passed along to setMatrix
animate {Boolean}: Whether to animate the pan (default: true)

$('.panLeft').click(function() { // animated pan to the specified coordinates $("#panzoom").panzoom("pan", -250, 100, {relative: true}, true); });

Hello, I'd like to use this script in an upcoming project. There we have SVG embedded in HTML with the element instead of (Because SVG-IMG cannot be interactive the way we need it).

I tried your script with the two methods

        < object data="Maps/mun-orig-ai.svg" id="floorplan-svg" ></ object>
        < img src="Maps/mun-orig-ai.svg" id="floorplan-svg" />

but only the img would respond to calls like $('#floorplan-svg').panzoom('zoom').

Could this be extended to work with OBJECT?

Hello, thank you VERY much for creating 'jquery.panzoom'.

I would like to have clickable/touchable areas in my SVG. I have tried the following:

• tags inside of the SVG markup. [ These do not appear to function with jquery.panzoom ].
• I have altered panzoom.js slightly to obtain the event.pageX/pageY coordinates, and use the 4th and 5th elements of the matrix to offset the coordinates. This yields usable results in Windows/Chrome, but iOS Safari and Android yield odd inconsistent coordinates.

Is there a built-in way to make areas clickable, and/or allow tags?

On Chrome and Firefox, please view the screencast:
http://www.youtube.com/watch?v=HCmfXSj_-aw

This amazing plug-in has problem with Fire Fox.it's not a technical problem,it's a graphical problem.
When you pan the container , the items lose their shapes.

Thank you for your attention

Hi, i`m just asking if i can zoom a svg with click but the zone where i click to be centred?

Hi,

First of all, thanks for the great plug-in!

I'm running into a problem with embedding an SVG document like this in my HTML:

<div id="svgdiv">
    <object type="image/svg+xml" data="mysvg.svg"></object>
</div>

Now, I'm attaching the panzoom to the outer div, which means I'll get panning and zooming on the SVG as well.
However, I'm attaching behavior to elements inside the SVG document as well.
I'm showing a popover in place when you hover over an element inside the SVG document. When no zooming or panning has taken place, the event gives me the correct coordinates for this popover.

Once zoomed and/or panned however, the coordinates do not seem to be correct (ie: they're still the old values). I tried using the transformation matrix to get the calculated position but I can't seem to figure it out.

Do you have any idea on how to do this?

The "width" attribute is misspelled in the element in 'test/index.html'.

Hi, I'm trying to restrict panzoom to one image and keep the footer from resizing on pinch/zoom.

http://jsbin.com/osixop/4/

Any thoughts on getting the panzoom("disable") to work on the footer divs (panel, trigger)?

Thanks

Thanks for a great plugin!

I'd like to use feature-detection rather than browser-detection for deciding whether the controls should be displayed or not.

What's missing in IE <= 8 which makes this plugin non-functional?

Thanks.

Hi, I found this plugin recently and find it extremely useful; thanks very much for creating it. However, the app I'm developing is designed in such a way that I am in need a particular feature for the plugin.

I'll do my best to explain my request:

My goal is to have a container element that receives touch input using the plugin, as usual. However, the container element will not move/scale in response. Instead, a child element (within the container) will move/scale. You see, I'm trying to create an infinitely pan-able and scaleable canvas, in which the child element will not necessarily be within the boundaries of the container.

Would it be possible/feasible to add this functionality?

Thanks very much,
Caleb

Is it possible to implement a smaller viewport that is a different aspect ratio than the original image? Let's say for instance I have an image that's 1800x1600 and I create an inverted panzoom instance with a minscale of 1 and maxscale of 2. I set the initial state to zoom so my 'viewport' is 900x800 zoomed. Is it possible to create a viewport that will contain the image to something like 700x450? I've played with various settings but I obviously don't have enough of a clue to figure it out.

$(".panzoom").panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range"),
$reset: $(".reset"),
contain: "invert",
minScale: 1,
maxScale: 2,
cursor: "arrow"
}).panzoom("zoom");

    $(".panzoom").panzoom("zoom", true);

Panning doesn't appear to work on Android.

http://codepen.io/adrianosmond/pen/KjJCH

From comment

Hello,
I have inside the panzoom container ".map", a div with a

and some navigation points with a link .... All work fine in desktop (the links click fine), but in mobile, the links do not work, I can only pan and zoom the container.
Any suggestions

I just updated to 1.4.2 after seeing you've made changes in the containment code. I'm not really sure how that is supposed to work. I changed your demo and passed in contain:true as an option so I expected a scaled down tiger to always be contained within the parent

Hi
Thanks for the great plug , works great
I have it set on a div
but in the panzoom div , I have elements that are draggable and resizable
so I'd like to stop the panzooming when these events start and turn it back on on end
I tried destroy and reinitialising panzooming
but the result isn't good
is there a right way to do this ?
Thanks for the help
Tibor

I need to make more demos for the different uses of Panzoom. Some of these include:

• contain: true
• contain: 'invert'
• focal point zooming (when finished)
• programmatic transitions

These demos should include both HTML and SVG and be responsive.

Hi, I'm using your plugin and it works great! Thanks for your work. But while I was working with it I needed to know the current zoom to know if it's active or it's have been reset to the initial zoom. I've checked the object I get with the instance() method, but I can't find it.

Is there any other way to simply get the current state of the plugin?
Thanks

hey,

the script works fine on desktop
but on my ipad mini i cant pan.
when i touch it it moves the hole site.

my version is 0.6 with jquery 1.9.3 and jquery ui 1.10.3

Hi,

On line 818 of your uncompressed plugin, you have hard-coded the zoom increment at 0.05. This, I think, should be set to "options.increment". Once I changed this line on my copy to reflect that, the range control acted as expected.

Fabulous plugin, thanks for writing and maintaining it.

It would be cool to have an option for a bit of inertia when you're dragging just to make it flow a bit smoother - similar to the effect you get dragging a finger on mobile. A little "spliney" rather than the very precise drag you get currently.

I'm not sure this would be possible for devs to emulate using the events you currently generate, but if you think it is, let me know!

Thanks - John
(Loving the resetDimensions fix you did too)

We'll try this out on a feature branch first.

Testing on iOS, when I click any elements within my panzoom element, the event is never hit. It seems to not be an issue on Chrome/Windows. It could be related to tap/touch events.

I suspect that this may be deliberate to get rid of the move cursor.

My use case is that I want to simulate a disabled state where I can click on a container and to turn on panning and zooming. I want to set the cursor to pointer while I'm in this disabled state to show that you can interact with it, but while panning is disabled you can't customise the cursor. See: http://codepen.io/adrianosmond/pen/cKbxB

It would be nice if the zoom behaved like native pinch zoom on touch devices. That is, pinching would zoom relative to the pinched point, not the image center.

Pointer event support coming soon.

Hi!

Thanks for the great plugin. I am using it in combination with jsPlumb. However, pinch-zooming does not work well: the focal point is different then expected.

I created a demo here:
http://jsbin.com/ASOHeSE/11/edit

Do you know what could be causing this?