Stack Overflow
Stack Overflow

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
20
votes
0 answers

image map area with panzoom & tooltip

There is a simple map of the image with the tooltip when clicking on the area and the possibility of in / out this map: var $section = $('.plan'); $('.panzoom').panzoom({ $zoomIn: $section.find(".zoom-in"), $zoomOut:…
SVE
  • 1,555
  • 4
  • 30
  • 57
3
votes
3 answers

big size of svg not working proper how to set big svg in react-pan-zoon-svg?

here i am using react-pan-zoom-svg and try to load large SVG in zoomable area I am getting some issues 1) when svg load its not load from center point of svg 2) when i move SVG its matrix value take me negative 3) fit to screen not…
jay khatri
  • 151
  • 1
  • 13
3
votes
1 answer

Angular 4 Zooming

I am new to Angular 4 and trying to find a library for pan zooming. I am not able to find any package on npm. I tried to add jquery in my project, then added jquery.panzoom, but because jquery.panzoom is written in JavaScript and my angular project…
aatish rana
  • 149
  • 1
  • 15
3
votes
1 answer

Using jquery panzoom alongside jquery draggable

So I have this jquery .draggable items that work inside the .droppable and the .droppable parent uses the jquery .panzoom. There is also a image for background witch is inside .canvasimg. Here is a tree of my html structure:
…
Miguel Machado
  • 180
  • 2
  • 3
  • 16
3
votes
2 answers

How to set Jquery panzoom default zoom?

Plugin Link I want to set its defualt zoom what ever i need Please tell me how to change this default zoom value i am not able to find with this plugin API ? Please Help ? Thanks This is my HTML
user4441
  • 67
  • 1
  • 9
3
votes
1 answer

Pan zoom with bxSlider not zooming in centralized

I have used Panzoom jquery with bxSlider. The problem is this while zooming with scroll it doesn't zoom on center. Zoom goes either left side or right Because of slider otherwise it works proper. find fiddle demo here.
…
Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
2
votes
1 answer

Touch zooming doesn't work with jQuery Panzoom

I've added jQuery Panzoom to my project. I'm showing an image full screen and I want to give the user the ability to zoom into that picture on iOS devices. Panning works, but zooming doesn't, and I don't know why. It also doesn't work in the Chrome…
André Reichelt
  • 1,484
  • 18
  • 52
2
votes
0 answers

Panzoom, set div position to zoom focal point when zooming

I would like to monitor visually the zooming focal point in the panzooom jquery plugin. in order to do so, I would like to position a little 10x10 div on the same coordinates as the focal point, but somehow it is placing it in a totally different…
sharkyenergy
  • 3,842
  • 10
  • 46
  • 97
2
votes
1 answer

How to implement jQuery.panzoom with node & browserify

On the plugin's github page there is the following explanation to implement the plugin via AMD loader: define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) { $(document).ready(function() { $(".panzoom-elements").panzoom(); …
Empi
  • 94
  • 1
  • 9
2
votes
0 answers

Jquery Panzoom zoom with focal not working

I'm using Panzoom (https://github.com/timmywil/jquery.panzoom) to zoom and pan on an image. When I try to use the 'focal' parameter to zoom in to a specific point, the first step does not seem to respect this value. Here is how I init…
Remy Cilia
  • 2,573
  • 1
  • 20
  • 31
2
votes
1 answer

jquery panzoom Plugin default zoom?

Hi I am using Jquery Panzoom Plugin for zoom in and zoom out my image, Plugin Link I want to set its defualt zoom value by myself Please tell me how to change this default zoom value i am not able to find with this plugin API ? Please Help ? Thanks
Ahmad
  • 1,462
  • 5
  • 17
  • 40
2
votes
1 answer

Jquery panzoom duration

Has anyone been able to get the duration on the panzoom to function? https://github.com/timmywil/jquery.panzoom I went into the source code and increased the duration time from 200 to 1200 and did not see a change when I called the zoom. …
user2524908
  • 861
  • 4
  • 18
  • 46
2
votes
0 answers

jQuery Panzoom plugin positioning image on right with contain:'invert'

I'm trying to use the jQuery Panzoom plugin, which is mostly fine, except... I want the large image to initially be scaled to fit in the container, and have contain: 'invert' enabled. I've adapted this example to scale and position the image when it…
Phil Gyford
  • 13,432
  • 14
  • 81
  • 143
2
votes
2 answers

set element fit into container in panzoom.js

I wanted to use panzoom.js. My image size is larger than container. I needed to make it fit into the container by default view.
Vinu Viswambharan
  • 61
  • 2
  • 7
1
vote
0 answers

Positioning misaligned using Jquery draggable snap feature if elements are scaled

Has anyone used panzoom with jquery draggable snap feature? I need to scale the parent div (#canvas) and allow child elements (.draggable) to be dragged and snapped to each other. All of this works very well except when scaled. If scaled/zoomed the…
5kyt3k
  • 11
  • 2
1
2 3