RonFeliciano supports this item


115 comments found.

Hi there!

Is it work with classes? I need to detect if element zoom in or zoom out:

var pz = PinchZoomer.get(“bigImage”), eventCtr = 1; pz.on(PinchZoomer.ZOOM, updateEventLog);

function updateEventLog(e)
    var text = "";
if(e.type == PinchZoomer.ZOOM.split(".")[0])
    text = "Event: Zoom - Factor: " + pz.zoom();
if (pz.zoom() == 2) {
    console.log('zoom in');
$("#eventLog").prepend(text + "

But I need to use not Id (var pz = PinchZoomer.get(“bigImage”)), I need class, what can I do?

I have a carousel and I need to detect zoom in or zoom out of every element by class, what can I do? how to detect that image zoom in not only by ID?

Add some sort of previous zoom variable. Initially set it to 1 and store the last value of the zoom factor every zoom event. Then compare the current zoom factor to the previous one. So if curZoom > prevZoom then zoom in. If not, zoom out.

If you still have problems, please send a message here -> Thanks

where is pz_sheet.png file? i can’t find that file.

Hi there,

Replied in your email


Kind of like mynando and stephenliu1944, I’m using Pinch Zoomer within in a Bootstrap remote modal but the image doesn’t show. Actually, it won’t show until I resize the browser. Please help. Thank you.

Hi there,

Please send me a message here ->

can I get the x y of the point in image when click on it?

Hi there,

Sent a reply to your email


May I know is there are way to change the marker content from tooltip to a some popup. For example I have image with lot of parts in it. So I need to create markers on each and every part and when someone click a marker it should show a popup with product name/ price and add to cart buttons etc.. So I just need to know if markers support just tooltips or if I can make it work with any type of popup etc.

If confirmed I’ll buy this today. Thanks

Hi there, Although there are Pinch Zoomer(PZ) examples that uses tooltips, they are not part (for now) of the PZ plugin. You should be able to use any type of plugin for tooltips/popup as long as they are not in conflict of the PZ plugin.

Hi, I read the guide and put the plugin but it is not working. Can you help me please ??

Hi there, Replied in your email.


gradual Purchased

Hi Ron, I read documentation but I not found a code for how to add a marker via API.

I have a single pinchZoomer instance and I want to dinamic load markers to it. Note that the elements I want to set as a marker are not in the dom yet, How can I do this? Here an example of my idea

// First define the array that will receive instances of markers
var markers = [];

var pz = PinchZoomer.get("map"), // this is my only instance of pinchzoomer in the page

// now I want to add a few new markers to pz
for(var i = 0; i < 5; i++) {
   // this is the element that I want to become a marker, note that is not in the dom yet
   var area = '<div class="area" />';
   // here is first doubt, I need to append this div to dom, if yes, before of after instance it as a marker?
   // second doubt, how do I define a fresh new Marker instance with this element?
   var mk = pz.Marker(area); // no idea what I'm doing at this line
   // after marker is instanced, define some vars
   mk.vars(x: 100, y: 50); // is that right?
   markers.push(mk); // add the new marker instance to array

pz.addMarkers(markers); // and finnaly define the just created markers to pz

I need some help here…

Hi there,

Please send a message here -> so it will be easier to assist you. Thanks!

Can I Zoom Text Content in DIV?

I’ve purchased this but unable to use this because it don’t allow me to set container size.

Hi t here,

You can zoom text and also you can set the container size using CSS and the PZ content will adjust its size based on the scaleMode option you placed.

Hey, is there any information on the Tooltip Titles that pop-up when you hover over the marker?

HI there,

Please send a message here -> Thanks!

Hello RonFeliciano,

I have same problem with safari on Mac and iOS, is there any fix for this?

Hi there,

Please send a message here -> and state your specific problem with safari. Thanks!

It is problem where upon zooming-in image becomes distorted and loses sharpness. In this instance I use SVG. Thank you

Please send a message here -> so it will be easier to assist you. Thanks!

Hi, am I able to use this with map source i.e.

<map name=”ChangeView”>

<area shape=”rect” coords=”50,72,249,185” href=”#” alt=””> <area shape=”rect” coords=”295,74,495,185” href=”#”> <area shape=”rect” coords=”295,226,494,339” href=”#”> <area shape=”rect” coords=”51,227,249,338” href=”#”> <area shape=”rect” coords=”49,377,251,491” href=”#”> <area shape=”rect” coords=”295,378,496,492” href=”#”> <area shape=”rect” coords=”52,531,248,642” href=”#”> <area shape=”rect” coords=”295,531,495,642” href=”#”> </map>

Hi there,

Mousewheel or touch events are not triggered around the area coordinates of the map. So using HTML Map tag with PinchZoomer is not recommended.

As an alternative, PinchZoomer has built-in markers that you can use for tooltips or links.

Thanks Rob for your reply, I’m not sure the markers will works as there could be 60 – 70 and could look messy.

Markers can be any element. In your case, the markers can be transparent divs or images

Hi, I dragging doesn’t work, when I try to add markers (and apply data-elem=”pinchzoomer” to the div)

Hi there,

Replied in your email.

Hi, i want to have the following behavior: When clicking in the first time it will zoom to level 1, another click make it zoom level 2 and another click will reset the zoom, how can i do it?

Itried with zoomIn but it not keeping the position of the x and y of the zoom


Hi there,

You can check out section 5 of the docs for the API basically

pz.zoom(2.0); // first zoom pz.zoom(3.0); // second zoom pz.zoom(1.0); // reset zoom

For further assistance, please send me a message here -> Thanks!


Marte5 Purchased

greetings, i’ve setup all but it not works: no errors in console, and nothing happen in the zoomHolder (and img tag) at all. Thanks

hi there, please send a message here – >

Hey, is it possible to show/hide ImageLayers depending on the zoom level?

Hi there,

I just answered your email. Thanks!