Questions tagged [jquery.panzoom]

Panzoom is a progressive plugin to create panning and zooming functionality for an element.

Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER. And although IE<=8 is not supported, this plugin is future-proof.

Github Repo

35 questions
1
vote
0 answers

Using jQuery panzoom , the img dimensions stay the same when i click zoom , how to zoom it?

I was trying to put a small icon / marker inside a big background image, and I wish that background image can be pan while zooming and also having multiple zoom level. So far what I tried is like this, my default division size is 1363 x 900 which…
Reggie
  • 49
  • 10
1
vote
1 answer

zoom pan issue in chrome 55

I'm using panzoom plugin of Timmywil https://github.com/timmywil/jquery.panzoom in my project. It has been working fine till now. But since chrome's latest update it's broken. It zooms once but if you start panning view is reset to original…
pravid
  • 719
  • 9
  • 27
1
vote
1 answer

Jquery panzoom on click

Looking to implement a jquery plugin which allows you to zoom into svg elements. https://github.com/timmywil/jquery.panzoom What I am having issues with is implementing the zoom functionality when a user clicks on an element, while using the…
user2524908
  • 861
  • 4
  • 18
  • 46
1
vote
1 answer

Mouse click transformation to svg after pan and zoom

Im using snap.svg an snap.svg.zpd libraries. Same issue I have if I use snap.svg and jQuery panzoom library combination. Code sample you can find here. var mySvg = $("#plan")[0]; var snap = Snap("#plan"); //create an image var imagePlan =…
Minja
  • 1,222
  • 1
  • 19
  • 28
1
vote
1 answer

Problems with panzoom library and window.print () in asp.net

I have a button bar , three of which are for the use of image zoom and scroll in it and the fourth is to send print the image, through the library gets done panzoom zoom and scroll , but if command print ( sent successfully ) .Now if I return to the…
Colours123
  • 606
  • 1
  • 5
  • 14
1
vote
2 answers

Attach background image to nested SVG element

I'm attempting to append a PNG or JPG background image to a SVG. Currently the background image does not show up, after trying multiple different methods of attaching it. I am using jQuery.panzoom as well as jquery.svg (only if I need to for this…
james
  • 5,006
  • 8
  • 39
  • 64
0
votes
1 answer

Enable jquery panzoom on some event

I'm using a jquery plugin that allows zooming and pan functionality, however I want this to be done only at some event( say when checkbox is clicked) because after having it by all the time, the default functionalities are getting affected which are…
Shivaraj
  • 400
  • 5
  • 16
0
votes
0 answers

jQuery draggable , how to move the draggable object to correct position even though I pan or zoom my image

I would like to do something like a google map , when someone drag the coordinates inside the google map, no matter the user zoom in or out the coordinates that the user drag will stay at same position , when I try to do this , after I drag my…
0
votes
1 answer

Dragging 2 page image with jQuery PanZoom

I have a 2 page image that I would like to display in a space meant to display one page at a time. I would also like to allow panning and zooming. Thus the user can view the entire 2 page image by dragging it. I have used panzoom to do this…
gordon613
  • 2,770
  • 12
  • 52
  • 81
0
votes
0 answers

Click disabled with jquery panzoom

I'm using a jquery plugin that allows zooming with mousewheel (i'm using it for mobile, to allow pinch zooming on a pdf) and I used this code (function() { var $section = $('#section'); var $panzoom = $section.find('.panzoom').panzoom(); …
Kays Kadhi
  • 538
  • 6
  • 21
0
votes
0 answers

When using Panzoom plugin on Canvas element the text becomes blurry when zoomin in

I'm using PanZoom on a canvas element. when i'm doing zoom in - the text on the canvas becomes blurry.. is there any way to avoid it? this is also the case with adding images to the canvas.. please see the below…
TomerMiz
  • 377
  • 1
  • 3
  • 13
0
votes
1 answer

Link won't work on mobile (using Panzoom JS plugin)

I'm using the Panzoom plugin to create a site where everything on the page can be panned around. On this page is a link to an external website. When I run it on a desktop browser, everything works (i.e. it pans, and the link is clickable). But…
Garrett
  • 3
  • 2
0
votes
1 answer

How to use matrix values from jQuery Panzoom plugin

I'm using the jQuery plugin Panzoom (https://github.com/timmywil/jquery.panzoom). When the user pans, it applies a CSS matrix transform. I'm only interested in the X and Y values of this matrix, which the JS file assigns as matrix[4] and matrix[5]…
Garrett
  • 3
  • 2
0
votes
2 answers

jQuery panzoom panning issue

this is what i have at the Moment:
$(document).ready(function(){ $("#panzoom").panzoom({ increment:…
MarkusHH
  • 153
  • 13
0
votes
0 answers

jQuery panzoom fit and center

There's a fixed container that serves as the viewport to my content. The content is a
element of a fixed size. The viewport size is bound to the window and may change if the user resizes the window. I'm using the jQuery.panzoom library to…
ygoe
  • 18,655
  • 23
  • 113
  • 210