Simple Image Hover Zoom JavaScript Library – ImageZoom.js

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();