zoomify
v0.2.5
Published
Zoomify is a jQuery plugin for simple lightboxes with zoom effect.
Downloads
26
Maintainers
Readme
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...
});
License
Copyright (c) 2015 Indri Muska. Licensed under the MIT license.