Author: | Nihilivin |
---|---|
Views Total: | 3,566 views |
Official Page: | Go to website |
Last Update: | February 3, 2016 |
License: | MIT |
Preview:

Description:
ImageZoom.js is a lightweight, zero-dependencies JavaScript library which adds zoom in effects to your images on mouse hover.
How to use it:
Include the JavaScript file ImageZoom.js and style sheet image_zoom.css on your html page.
<script src="image_zoom.js"></script> <link href="image_zoom.css" rel="stylesheet">
Add an image to the page.
<img src="demo.jpg">
Initialize ImageZoom and done.
new ImageZoom("img", {/*options*/});
Display the zoomed image next to the original image.
new ImageZoom("img", { target: { right: 25 } }),
All available options.
new ImageZoom("img", { // Maximum zoom level maxZoom: 2, // 1 is the full axis, 0 nothing deadarea: 0.1, // Duration of the animation of appearance/disappearance of the zoomed image appearDuration: 0.5, // Description of the target area. // If null, the target area will be the current image provided. target: null, // Explicit URL of the zoomed image. // If null, the source will be the attribute data-fullwidth-src of the image, or the attribute src of the image if the first is not defined imageUrl: null, // Background color used behind images with transparence backgroundImageColor: null, // If defined to false, source image deformations will be kept forceNaturalProportions: true }),
API methods.
imgZoom.enable(); imgZoom.disable(); imgZoom.delete();