jQuery Plugin For Image Lightbox with Zoom Effect - Zoomify

Zoomify is an extremely simple-to-use jQuery image zoom plugin that enables you to display the full size images in a fullscreen, responsive modal popup.

Basic usage:

1. Download the zoomify plugin and include the zoomify.js script from dist folder into your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/zoomify.js"></script>

2. Just call the zoomify() function on the img tag and we're ready to go.

$('img').zoomify();

3. The default CSS styles for the plugin. Feel free to override and change the CSS rules as shown below to create your own styles.

.zoomify {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.zoomify.zoomed {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1501;
}

.zoomify-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1500;
  background: rgba(0, 0, 0 , .3);
  opacity: 0;
}

.zoomify-shadow.zoomed {
  opacity: 1;
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

4. Config the zoom effect and scale level.

$('img').zoomify({

  // animation duration
  duration: 200,

  // easing effect
  easing:   'linear',

  // zoom scale
  // 1 = fullscreen
  scale:    0.9

});

5. API methods.

// Starts a zoom-in transformation
$('img').zoomify('zoomIn');

// Starts a zoom-out transformation
$('img').zoomify('zoomOut');

// Toggles the image zoom state
$('img').zoomify('zoomOut');

// Calculates the correct position of the image and moves it at the center of the visible part of page.
$('img').zoomify('reposition');

6. API events.

// Fired before each zoom-in transformation.
$('img').on('zoom-in.zoomify', function () {
  // do something...
});

// Fired after each zoom-in transformation.
$('img').on('zoom-in-complete.zoomify', function () {
  // do something...
});

// Fired before each zoom-out transformation.
$('img').on('zoom-out.zoomify', function () {
  // do something...
});

// Fired after each zoom-out transformation.
$('img').on('zoom-out-complete.zoomify', function () {
  // do something...
});

Changelog:

2018-12-02

• Added support to exit zoom by pressing ESC

2015-11-10

• Support to natural width/height

2015-11-05

• Added methods to perform zoom via JavaScript manually

---

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