Smooth Zoom Pan - jQuery Image Viewer

Description

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.

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
jQuery version 1.9.1 support added
PrettyPhoto version 3.1.5 support added
IE6 support fully dropped
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.
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
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).
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
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
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

Smooth Zoom Pan - jQuery Image Viewer

Description

Options:

Performance:

Categories

Tags

Products of the Week.