Simple Image Hover Zoom JavaScript Library – ImageZoom.js

Category: Javascript , Zoom | February 3, 2016
Views Total:3,566 views
Official Page:Go to website
Last Update:February 3, 2016


Simple Image Hover Zoom JavaScript Library – ImageZoom.js


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.



You Might Be Interested In:

Leave a Reply