Smooth Zoom Pan - jQuery Image Viewer

          

This is a javascript / CSS based image viewer prepared to display product photos, maps or any image within custom small area. Can be configured and implemented in web pages with simple copy / paste steps. Supports all major touch enabled devices and platforms iOS, Android and Windows 8.

More than 30 parameters available to customize, yet a standard version can work simply with 2 values:

$('#yourImageID').smoothZoom({
    width: <Enter Width>,
    height: <Enter Height>
});

Options:

  • Initial Zoom level
  • Initial Position
  • Maximum zoom level
  • Minimum zoom level

  • Animation Smoothness
  • Animation Speed for Zoom
  • Animation Speed for Pan
  • Fit or Fill the image
  • Enable / Disable Pan buttons
  • Enable / Disable Pan Limitation
  • Adjustable Button Size, Color, Transparency, Alignment and Margin
  • Button Auto Hide and Delay Time

  • Mouse Drag / Touch Drag
  • Mouse Wheel zoom control
  • Mouse Cursor location zoom on mouse wheel
  • Mouse Double Click zoom

  • Border size, color, transparency
  • Full browser size option
  • Max width and height (for window resize)


UPDATE V1.7: [30 MAY 2014]
  • Windows 8 Phone / Tablet, IE10+ support added
  • Now works with pointer events for consistent touch support and compatibility


  • UPDATE V1.6.9: [18 MAR 2013]
  • jQuery version 1.9.1 support added
  • PrettyPhoto version 3.1.5 support added
  • IE6 support fully dropped


  • UPDATE V1.6: [10 JUN 2012]
  • Responsive & Fluid layout support added with adjustable settings
  • A new method added to resize view area any time after initiation
  • Landmarks can resize on zoom (Except IE8 & below)
  • Custom alignment – on clicking reset button aligns the image in specified way
  • Pan direction can be reversed through settings
  • Separate speed settings for zoom and pan
  • Few minor big fixes and few more minor options added.


  • UPDATE V1.5: [18 MAR 2012]
  • Single Step Zoom – Possible to reach maximum and minimum zoom levels in one click
  • Touch friendly Button size – Option to set different button size for Touch devices
  • 2 New callbacks added
    – Triggers each time the scale / position values updated (on each animation frame)
    – Triggers whenever landmark’s visibility changes
  • iOS bugs fixed – The landmark position related issues on iPad, iPhone, iPod fixed
  • Chrome bug fixed – The random black border appearance on google chrome fixed


  • UPDATE V1.4: [04 MAR 2012]
  • Dynamic Landmarks – Possible to add / remove / refresh landmarks on runtime.
  • focusTo method improved with custom speed parameter.
  • Possible to set custom callback functions on the following 2 occasions:
         - On Image Load.
         - Everytime the zoom/pan action completes (returns scale / position data).


  • UPDATE V1.3: [12 FEB 2012]
  • Landmarks / Lables / Location Pin support added. (Preview #5)
  • Thumbnail Gallery example added. (Preview #6)
  • Lightbox Gallery example added. (Preview #7)
  • Pinch Zoom support added for touch device navigation
  • FireFox 10+ bug of not able to drag fixed
  • Coding improved to meet better performance


  • UPDATE V1.2: [02 NOV 2011]
  • Additional method added to retrieve current position and zoom values (sample #4)
          This data will be helpful in the following occasions:
          1. To make Crop Tool
          2. To store the current zoom data and re-open the page with exact same level and position
  • Now the fullscreen offset value can be set for both width & height in percentage


  • UPDATE V1.1: [20 OCT 2011]
  • Added ability to control all the button actions from outside the plugin (using your own buttons)
  • Added option to remove all the buttons (for the above purpose)
  • Source file contains 4 example variations to start customisation easily
  • Performance:

    Smoothness varies according to browser capabilities. The plugin utilizes best available options on modern browsers while managing visibility on older browsers:

    by
    by
    by
    by
    by
    by