Smart jQuery Pan and Zoom Plugin - Smart jQuery Zoom

Smart jQuery Zoom is a customizable and touch-enabled plugin for jQuery that allows you to create panning and zooming functionality with lots of options for an element.

Features:

• zoom in & zoom out
• zoom with mouse wheel 
• zoom with touch events on mobile devices

Basic Usage:

1. Include jQuery library and Smart jQuery Zoom on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="e-smart-zoom-jquery.min.js"></script>

2. The html

<div id="pageContent">
<div id="imgContainer"> <img id="imageFullScreen" src="assets/zoomFullScreen.jpg"/> </div>
<div id="positionButtonDiv">
<p>Zoom : <span> <img id="zoomInButton" class="zoomButton" src="assets/zoomIn.png" title="zoom in" alt="zoom in" /> <img id="zoomOutButton" class="zoomButton" src="assets/zoomOut.png" title="zoom out" alt="zoom out" /> </span> </p>
<p> <span class="positionButtonSpan">
<map name="positionMap" class="positionMapClass">
<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
<area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
</map>
<img src="assets/position.png" usemap="#positionMap" /> </span> </p>
</div>
</div>

3. The CSS

#imgContainer {
width: 980px;
height: 500px;
}
#positionButtonDiv {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(58, 56, 63);
/* RGBa with 0.6 opacity */
background: rgba(58, 56, 63, 0.8);
border: solid 1px #100000;
color: #FFFFFF;
padding: 8px;
text-align: left;
position: absolute;
right: 35px;
top: 190px;
}
#positionButtonDiv .positionButtonSpan img {
float: right;
border: 0;
}
.positionMapClass area {
cursor: pointer;
}
.zoomButton {
border: 0;
cursor: pointer;
}
.zoomableContainer {
background-image: url("assets/transparent.png");
}

4. The javascript

<script>
$(document).ready(function() {

$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});

$('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
$('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);

function zoomButtonClickHandler(e){
var scaleToAdd = 0.8;
if(e.target.id == 'zoomOutButton')
scaleToAdd = -scaleToAdd;
$('#imageFullScreen').smartZoom('zoom', scaleToAdd);
}
    
function moveButtonClickHandler(e){
var pixelsToMoveOnX = 0;
var pixelsToMoveOnY = 0;

switch(e.target.id){
case "leftPositionMap":
pixelsToMoveOnX = 50;
break;
case "rightPositionMap":
pixelsToMoveOnX = -50;
break;
case "topPositionMap":
pixelsToMoveOnY = 50;
break;
case "bottomPositionMap":
pixelsToMoveOnY = -50;
break;
}
$('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
    }

});
</script>

5. Options

options = {'top' : '0', // zoom target container top position in pixel
'left' : '0', // zoom target container left position in pixel
'width' : '100%', // zoom target container width in pixel or in percent
'height' : '100%', // zoom target container height in pixel or in percent 
'easing' : 'smartZoomEasing', // jquery easing function used when the browser doesn't support css transitions
'maxScale' : 3, // the max scale that will be applied on the zoom target
'dblClickMaxScale' : 1.8, // the max scale that will be applied on the zoom target on double click
'mouseEnabled' : true, // enable plugin mouse interaction 
'scrollEnabled' : true, // enable plugin mouse wheel behviour
'dblClickEnabled' : true, // enable plugin mouse doubleClick behviour
'mouseMoveEnabled' : true, // enable plugin target drag behviour
'moveCursorEnabled' : true, // show moveCursor for drag
'touchEnabled' : true, // enable plugin touch interaction 
'dblTapEnabled' : true, // enable plugin double tap behaviour 
'pinchEnabled' : true, // enable zoom when user pinch on target
'touchMoveEnabled' : true, // enable target move via touch
'containerBackground' : '#FFFFFF', // zoom target container background color (if containerClass is not set)
'containerClass' : ''// class to apply to zoom target container if you whant to change background or borders (don't change size or position via css)
} 

Change log:

2014-07-25

• CSS transition support

v1.1.3 (2014-05-01)

• Add initFallback and improve mobile behaviours

v1.0.8 (2014-05-01)

• jquery 11.1.0 support

---

This awesome jQuery plugin is developed by e-smartdev. For more Advanced Usages, please check the demo page or visit the official website.