Smooth Image Enlargement Plugin For jQuery - Zoomer

File Size: 1.21 MB
Views Total: 9567
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Image Enlargement Plugin For jQuery - Zoomer

Zoomer is a lightweight jQuery plugin that allows your visitors to zoom in and zoom out images with a smooth animation effect.

Basic Usage:

1. Include jQuery library and zoomer.js script on your page

<script src="jquery.min.js"></script>
<script src="jquery.fs.zoomer.min.js"></script>

2. Include Zoomer CSS

<link href="jquery.fs.zoomer.css" rel="stylesheet" type="text/css">

3. Markup

<div class="zoomer_wrapper zoomer_basic"></div>

4. The CSS

<style>
.zoomer_wrapper {
border: 1px solid #ddd;
border-radius: 3px;
height: 500px;
margin: 10px 0;
overflow: hidden;
width: 100%;
}
</style>

5. Call the plugin

<script>
$(document).ready(function() {
$(".zoomer_basic").zoomer({
source: "1.jpg"
});     
});
</script> 

6. Options

callback: $.noop,
controls: {
  // Position of default controls
  position: "bottom",
  // Custom zoom control selector
  zoomIn: null,
  // Custom zoom control selector
  zoomOut: null,
  // Custom pagination control selector
  next: null,
  // Custom pagination control selector
  previous: null
},
// Class applied to instance
customClass: "",
// Zoom smoothing (0.1 = butter, 0.9 = sandpaper)
enertia: 0.2,
// Zoom speed (0.01 = tortoise, 0.1 = hare)
increment: 0.01,
// Min bounds
marginMin: 30, 
// Max bounds
marginMax: 100, 
// Flag for retina image support
retina: false,
// Source image (string) or tiles (object)
source: null

Change log:

v3.1.0 (2015-12-31)

  • Added parent-scope to custom UI control selectors

v3.0.12 (2014-07-29)

  • Fixing issue with transform support

v3.0.11 (2014-07-09)

  • Merging fixes

v3.0.10 (2014-07-01)

  • Normalizing transform3d when scaleX and scaleY are not valid.

v3.0.9 (2014-05-28)

  • Fixing transform3d support check;

v3.0.8 (2014-03-16)

  • Fixing demo and doc.

v3.0.5 (2014-03-10)

  • Added gallery preloading;

v3.0.4 (2014-02-17)

  • Fixing loading icon path;

v3.0.3 (2014-02-17)

  • Removing need for box-sizing change;

v3.0.1 (2014-02-07)

  • Fixing data checks;

v0.3.3 (2013-10-16)

  • Fixing Bower endpoint.

v0.3.2 (2013-10-01)

  • updated to the latest version

v0.2.5 (2013-09-04)

  • Fixing IE10 touch events; Cleaning things up

v0.2.4 (2013-09-01)

  • Adding public "pan" method; Pass (left, top) percentage of image to pan to

v0.2.3 (2013-08-31)

  • Fixed issue with initial image size.

v0.2.0 (2013-08-30)

  • Added gallery support; Switched to markup based initialization
  • Added multi-touch zoom and pan support

This awesome jQuery plugin is developed by FormstoneClassic. For more Advanced Usages, please check the demo page or visit the official website.