/zoomify

A jQuery plugin for simple lightboxes with zoom effect.

Primary LanguageJavaScriptMIT LicenseMIT

Zoomify

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

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

License

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