Pan and zoom JQuery plugin

Pan and zoom is a jquery plugin that manage smooth zoom and pan on a given dom element. The plugin works on mobile and pc and use CSS3 transitions on compatible web browsers. (javascript is used for old web browsers)

Zoom is enabled via mouse events (scroll and click) on pc and with touch events on mobile devices.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: e-smartdev.com

1. INCLUDE JS FILES

<script src="/js/framework/jquery-1.7.1.min.js"></script>
<script  src="/github/smartJQueryZoom/src/e-smart-zoom-jquery.min.js"></script>

2. HTML

<div class="demoZoomContainer">
 <div class="logDemoTest">
  <p>Zoom : 
   <span>
    <input id="zoomInButton" type="button" value="+" />
    <input id="zoomOutButton" type="button" value="-" />
   </span>
  </p>
  <p>
   <span class="positionButtonSpan">
    <map name="positionMap" class="positionMapClass">
     <area id="topPositionMap" shape="rect" coords="20,0,40,20"/>
     <area id="leftPositionMap" shape="rect" coords="0,20,20,40"/>
     <area id="rightPositionMap" shape="rect" coords="40,20,60,40" />
     <area id="bottomPositionMap" shape="rect" coords="20,40,40,60" />
    </map>
    <img src="position.png" usemap="#positionMap"/>
   </span>
  </p>
 </div>

3. JAVASCRIPT

$("#smallZoomImage").smartZoom(); // plugin call
$("#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;
   $("#smallZoomImage").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;
   }
   $("#smallZoomImage").smartZoom("pan", pixelsToMoveOnX, pixelsToMoveOnY);
}

4. OPTIONS

You can customize smartZoom plugin behaviour with an option object.

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)
          } 

This sample code set the maximum scale to 4 and apply a red background to the zoom container:

  $(document).ready(function() {
    $("#elementToZoomOn").smartZoom({'maxScale':4, 'containerBackground':'#FF0000'}); // start plugin behaviour
  });

5. METHODS

smartZoom("zoom", scaleToAdd, globalRequestedPosition, duration)

Zoom on a given position.

    jQuery(document).ready(function(){
         $('#domElementToZoom').smartZoom("zoom", 0.5);
    });

This call add 0.5 to the target current scale.

Arguments

1. scaleToAdd {Number}: Scale to add to the target.
2. globalRequestedPosition {Object}: Position to zoom on. (Default target center)
3. duration {Number}: Effect duration in millisecondes. (Default 700)

smartZoom("pan", pixelsToMoveOnX, pixelsToMoveOnY, duration)

Move the target on the given position.

    jQuery(document).ready(function(){
     $('#domElementToZoom').smartZoom("pan", 5, 0);
  });

This call move the target 5 pixels to the right.

Arguments

1. pixelsToMoveOnX {Number}: Pixels to add on horizontal axis
2. pixelsToMoveOnY {Object}: Pixels to add on vertical axis.
3. duration {Number}: Effect duration in millisecondes. (Default 700)

smartZoom("destroy")

Remove and clean the plugin.

    jQuery(document).ready(function(){
      $('#domElementToZoom').smartZoom("destroy");
  });

Remove the plugin behaviour.

smartZoom("isPluginActive"):Boolean

Check if the plugin is active or not.

    jQuery(document).ready(function(){
     if($('#zoomImage').smartZoom('isPluginActive'))
          $('#zoomImage').smartZoom('destroy'); 
     else
          $('#zoomImage').smartZoom();
  });

If the plugin is activate, remove it else launch it.