1. Introduction back to top

2. Version History back to top

Version 2.2

Added

Version 2.1.3

Bug Fixes
   - skipping content when zoomed using double tap or zoom buttons
   - ghost image when dragging thumb scroller
   - not scrolling sometimes when already zoomed out

Changed
   - typo in the guide. touchnswipe.min.css to pinchzoomer.min.css
   - typo in the pz_options.html. removed {} in the generated HTML in the data-options

Version 2.1

Added

 Options
   - zoom to Marker option (default is disabled)
   - drag limit to center (default is disabled)
   - scroll page when content reaches its drag limit (default is disabled)
   - "smart" value for scaleMode option
   - initZoom

 API
   - transform function
   - zoomToMarker function

 Feature
   - marker tooltips now included

 Examples
   - Dynamic Options
   - Add or Remove Markers
   - Multilayer Zoom
   - Map with Markers

Removed
 - mousewheel plugin dependency

Changed
 - The content keeps the zoom factor when window is resized or device changes orientation

Version 2.0

Added
- Support for HTML content (not just images)
- Use of native scrolling when content is not zoomed
- Markers
- Native fullscreen
- Adaptive image loading
- More examples using API

Removed
- Support for IE8 and below and Android 2.2.x (for IE8 and below and Android 2.2.x support use version 1.x)
- Modernizr(No longer required)

Changed
- Improved API for events, content manipulation
- Content options
- Controls are always visible for improved performance

3. Plugin Setup back to top

3.1. Copy the contents of src/minified  folder back to top

3.2. Add Javascript and CSS in your HTML back to top

<link href="css/pinchzoomer.min.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/hammer.min.js" type="text/javascript"></script>
<script src="js/TweenMax.min.js" type="text/javascript"></script>
<script src="js/jquery.pinchzoomer.min.js" type="text/javascript"></script>           

3.3. Adding multi-touch zoom capability to your HTML content back to top

Image only example

HTML

<div class="zoomHolder">
   <img data-src="assets/easter_chick.jpg" data-elem="pinchzoomer"/>
</div>

CSS

.zoomHolder
{
   width:100%;
   height:auto;
   position:relative;
   overflow:hidden
}

DIV example (contains 2 image layers)

HTML

<div class="zoomHolder">
   <div data-elem="pinchzoomer">
      <img id="streetLayer" data-src="assets/street_layer.jpg" data-elem="bg" class="layerImg"/>
      <img id="buildingLayer" data-src="assets/detail_layer.png" class="layerImg"/>
   </div>
</div>

CSS

.zoomHolder
{
   width:100%;
   height:auto;
   position:relative;
   overflow:hidden
}

.layerImg
{
   position:absolute;
   left:0px;
   top:0px;
   right:auto;
   bottom:auto; 
}

3.4. Setting options in data-options  attribute back to top

<img src="assets/1.jpg" data-elem="pinchzoomer" data-options="preloaderUrl:assets/preloader2.gif; maxZoom:6;"/>

3.5. Changing the style of the controls back to top

3.5.1. CSS only method back to top

<div class="zoomHolder"> 
   <img data-src="assets/easter_chick.jpg" data-elem="pinchzoomer"/>
</div>

.controlHolder
{
   width:130px;
   height:30px;
   background:rgba(255,255,255,0.70);
   top:10px;
   margin:auto;
   left:auto;
   right:auto;
   bottom:auto;
   position:relative
}

.zoomIn, .zoomOut, .fullscreenToggle
{
   background:url(../assets/pz_sheet_blue.png) no-repeat;
   display:inline-block;
   margin: 0px 5px 0px 5px;
}

.zoomOut
{
   background-position:-30px 0px;
}

.fullscreenToggle
{
   background-position:-60px 0px;
}

3.5.2. Adding controls manually back to top

<div class="zoomHolder"> 
   <img data-src="assets/easter_chick.jpg" data-elem="pinchzoomer"/>
   <div class="controlHolder" data-elem="controlHolder" style="width:130px; height:30px; background:rgba(255,255,255,0.70); top:10px; margin:auto; left:auto; right:auto; bottom:auto; position:relative">
      <div class="zoomIn" data-elem="zoomIn" style="background:url(assets/pz_sheet_blue.png) no-repeat; display:inline-block; margin: 0px 5px 0px 5px;"></div>
      <div class="zoomOut" data-elem="zoomOut" style="background:url(assets/pz_sheet_blue.png) no-repeat; display:inline-block; margin: 0px 5px 0px 5px;background-position:-30px 0px;" ></div>
      <div class="fullscreenToggle" data-elem="fullscreenToggle" style="background:url(assets/pz_sheet_blue.png) no-repeat; display:inline-block; margin: 0px 5px 0px 5px;background-position:-60px 0px;"></div>
   </div>
</div>

3.6. Defining Markers back to top

3.6.1. Adding Marker transformOrigin presets back to top

3.6.2. Adding Marker Tooltips back to top

Step 1. Add the JS and CSS files.

<link href="css/tooltipster.bundle.min.css" type="text/css" rel="stylesheet"/>
<script src="js/tooltipster.bundle.min.js" type="text/javascript"></script>

Step 2. (Optional) If you want other themes, you can add the CSS in css/plugins/tooltipster/sideTip/themes.

<link href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" type="text/css" rel="stylesheet" />

Step 2.1. Add theme name

<img src="#" data-src="assets/image.jpg" data-elem="pinchzoomer" data-options="tooltipOptions:{ theme:'tooltipster-shadow' }" />

Step 3. Add data-tooltip  or data-tooltip-html  to your marker

Step 3.1. Use data-tooltip  for simple text

<img src="#" data-src="assets/marker.png" class="marker tooltip" data-elem="marker" data-options="x:490; y:80;"  data-tooltip="Simple text only"/>

Step 3.2. Use data-tooltip-html  to add html content

Step 3.2.1. Set the HTML content directly in data-tooltip-html

<img src="#" data-src="assets/marker.png" class="marker" data-elem="marker"  data-options="x:180; y:330"  data-tooltip-html="<div>With HTML</div>"/>

Step 3.2.2. Set using an id  of a template in your HTML

<img src="#" data-src="assets/marker.png" class="marker" data-elem="marker"  data-options="x:180; y:330"  data-tooltip-html="#markerInfo"/>

<div style="display:none">
   <div id="markerInfo">
      This is using id reference
   </div>
</div>

4. Important Tips back to top

4.1. Automatic Content Sizing back to top

<div class="zoomHolder">
   <div data-elem="pinchzoomer">
      <img id="streetLayer" data-src="assets/street_layer.jpg" data-elem="bg" class="layerImg"/>
      <img id="buildingLayer" data-src="assets/detail_layer.png" class="layerImg"/>
   </div>
</div>

4.2. Loading Images back to top

It is possible that the images inside may affect the size of the content holder. This usually happens if the content's width and height is not set. To make sure the content holder has the correct size, images must be preloaded. To do this, the value of src attribute should be "#" and set the data-src attribute to the url of the image.

<div class="zoomHolder">
   <div data-elem="pinchzoomer">
      <img id="streetLayer" src="#" data-src="assets/street_layer.jpg" data-elem="bg" class="layerImg"/>
      <img id="buildingLayer" src="#" data-src="assets/detail_layer.png" class="layerImg"/>
   </div>
</div>

4.3. Using Adaptive Images back to top

On most websites, same images are loaded whether it is viewed on a desktop or a small screen device. The problem is that loading huge images especially on small screen devices will result to unnecessary load time, resources and lag. The solution for this is to deliver large version of the images for desktop and small images for small screen devices. Fortunately PinchZoomer has an adaptive image loader module that takes care of this task. Its main function is to load images based on the screen size of the user. Check out the steps below on how to set it up.

4.4. Browser Workarounds back to top

 
4.4.1. Firefox(as of 66.0.2) on Windows 10 with Touchscreen
In order for the multi-touch gestures to work, the content must not exceed the height of the viewport. If your content is taller than the viewport(which is probably 99% of the case), you must wrap your content in a div. The maximum height of the div holder can only be 100% of the viewport. Not sure why this is the case but hopefully this will be fixed in the future. Below is the basic setup to make it work.

body,html
{
   margin:0px;
   height:100%;
}

.contentHolder
{
   max-height:100%;
   overflow:auto;
   -webkit-overflow-scrolling:touch; /* for ios momentum scrolling */
}

<div class="contentHolder">
   <!-- your content here -->
</div>

 
4.4.2. Safari and Chrome on iOS(12.1.4)
There is rendering issue on tooltips when markers are not hardware accelerated. Simply add force3D:true in the data-options of the markers with tooltips. Note that only add this on markers with tooltips because this may slowdown the device when used to big images like in the multilayer zoom example. Check out the HTML below:

<img data-src="assets/marker.png" class="marker" data-elem="marker" data-options="x:240; y:100; force3D:true" data-tooltip="A tooltip"/>

5. PinchZoomer API (for advanced users) back to top

The simple example below shows how to use the jQuery plugin.

HTML

<div class="zoomHolder"> 
   <img id="pzImg" data-src="assets/easter_chick.jpg"/>
</div>

Javascript

/* 
   This code will 
   - use the image with "pzImg" id
   - set the initial options to maxZoom to 5 and scaleMode to "smart"
   - not add controls 
*/
$("#pzImg").pinchzoomer({maxZoom:5, scaleMode:"smart"}, false);

//access static properties
var objs = PinchZoomer.objs,
    transformPresets = PinchZoomer.transformPresets;

//access static functions
var pz = PinchZoomer.get("pz1"), // "pz1" here is the id of the element with data-elem="pinchzoomer"
    transformPreset = PinchZoomer.getTransformOrigin("tp1"); // "tp1" is the id of the preset. See section 3.6.1 for details
PinchZoomer.remove("pz1"); // remove PinchZoomer instance given the id

var pz = PinchZoomer.get("pz1"); // "pz1" here is the id of the element with data-elem="pinchzoomer"

//access public function example
pz.x(30); // set x to 30
var curX = pz.x(); // returns x

//add an event listener
pz.on(PinchZoomer.ZOOM, onZoom);
pz.zoom(2); // set zoom factor to 2x 

function onZoom()
{
   var curZoom = pz.zoom(); // returns zoom factor 
   console.log("ZOOM: " + curZoom);
}

var pz = PinchZoomer.get("pz1"), // "pz1" here is the id of the element with data-elem="pinchzoomer" is 
    markers = pz.markers(), // return the array of markers
    firstMarker = markers[0]; // get first marker

//add event listener
firstMarker.on(Marker.UPDATE, onMarkerUpdate);

function onMarkerUpdate()
{
   console.log("MAKER UPDATE!");
}