A jQuery plugin for simple lightboxes with zoom effect.
Switch branches/tags
Nothing to show
Clone or download
indrimuska Support to natural width/height
Maximum zoom limits to natural image dimensions (width & height).
Latest commit a44d88d Nov 10, 2015



Join the chat at https://gitter.im/indrimuska/zoomify

Zoomify is a jQuery plugin for simple lightboxes with zoom effect.

Check out the examples page: http://indrimuska.github.io/zoomify.

Zoomify: jQuery Plugin for lightboxes


<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/vendor/zoomify/dist/zoomify.min.js"></script>
<link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">


Enable zoomify via JavaScript:

$('img.myImage1').zoomify(); // Default settings
$('img.myImage2').zoomify({ duration: 1000 }); // 1s duration


Property Type Default Description
duration integer 200 Transition duration in milliseconds.
easing string "linear" Transition property name.
scale float 0.9 If the image is bigger than the size of the page, it represent the maximum zoom scale according to page width/height (from 0 to 1).

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-duration="".


Method Description
zoom Starts a zoom-in or a zoom-out transformation depending on the state of the image.
zoomIn Starts a zoom-in transformation.
zoomOut Starts a zoom-out transformation.
reposition Calculates the correct position of the image and moves it at the center of the visible part of page.

Example of call the zoomIn() method:



Event Description
zoom-in.zoomify Fired before each zoom-in transformation.
zoom-in-complete.zoomify Fired after each zoom-in transformation.
zoom-out.zoomify Fired before each zoom-out transformation.
zoom-out-complete.zoomify Fired after each zoom-out transformation.
$('#myImage').on('zoom-in.zoomify', function () {
    // do something...


Copyright (c) 2015 Indri Muska. Licensed under the MIT license.