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.

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.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:

Smooth Zoom Pan - jQuery Image Viewer