Smooth Zoom Pan - jQuery Image Viewer

This is a jQuery 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
• 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 .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:

FAQ

Q: Links from Landmarks not working. How to make it clickable?
A: The landmark’s draggability needs to be disabled to make it support click & hover. To do so, set the following attribute for the ‘landmarks’ wrapper div:
data-allow-drag="true"

Support:

If you have questions or help needed to implement the file, feel free to contact me through my profile page or comments page. I can help faster if link to your implementation or code sent me through my profile page.