Smooth Zoom Pan – jQuery Image Viewer

Smooth Zoom Pan – jQuery Image Viewer Created by VF. This templates have specific characteristics, namely:            .

You can use this Smooth Zoom Pan – jQuery Image Viewer on Javascript category for android, crop, fluid, image, ios, ipad, jquery, landmark, map viewer, pan, resize, responsive, scale, touch, zoom and another uses.

Smooth Zoom Pan - jQuery Image Viewer
© Copyright by VF

Features:

  • None: None
  • Jquery: jQuery
  • None: None
  • Ie7, ie8, ie9, ie10, ie11, firefox, safari, opera, chrome, edge: IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Javascript js, html: JavaScript JS, HTML

          

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