indrimuska/zoomify

A jQuery plugin for simple lightboxes with zoom effect.

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.

zoomify's Issues

Problem with images with margin

Hi, I really liked this script, but I came across one feature.
I have images with margin-top in styles, when i use Zoomify for image data, the enlarged image when clicked is shifted up by the number of pixels in the margin-top for image. This is especially noticeable if the image is large and scale is set to 0.98 for better magnification. When scrolling, the image becomes centered, but when clicked, it is shifted up. I tried to see something myself, but I didn’t succeed. For the test, create a large image with Zoomify and a 100 pixel margin top in image style. I just wrote what I saw, because I couldn’t fix it myself, thanks.
( wrote using google translator :) )

Zoomify-shadow above the image when using `animate.css`

Image Inside parent Div go behind zoomify-shadow div please look on this matter asap

Pitt Digital Library unsupported

Dear friends,

I don't know if this is the proper location to submit this - I did a lot of research and wasn't able to decide, I'm new to all of this.

The issue is that Digital Library of University of Pittsburg is not supported. I tried to use the addon in three different browsers. I also have tried to go the alternative way, searching for the link in the developer tab, but nothing really worked.

Thank you!

Here is an example: https://digital.library.pitt.edu/islandora/object/pitt%3Awmlp0056

Hi freind!

Hey. I like your plugin. I installed it on one of my projects and I think that I will use it on others. But I need your help in finalizing the plugin.

Or you need a function to reload the plugin so that it reads the contents of the page again.

Or implement a double-execution lock.

I will be glad if you solve this problem.

Explanation: If you enable the plugin, and then load the data using Ajax, then the new data will not be processed by the plugin. If it is also initiated again, the first images will be enlarged with duplication.

Thumbnails preview

Hi, i really liked this one lib. But i have to ask:
how to load the thumbnail, and after the click event call the large img

Uncaught SyntaxError: Unexpected token '<'

Uncaught SyntaxError: Unexpected token '<'