Zoomify

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

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

Installation

<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">

Usage

Enable zoomify via JavaScript:

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

Options

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="".

Methods

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:

$('#myImage').zoomify('zoomIn');

Events

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...
});