adi-imagezoom v1.0.1

About this plugin

Zoom your image with hover or by tap (mobile). Perfect for ecommerce stores.

Installation

Using NPM

npm install adi-imagezoom --save

Using CDN

<script src="https://unpkg.com/adi-imagezoom@1.0.1"></script>

Usage

Make sure that the HTML is arranged in following format

<div id='root'>

    <img src="image.png" id="image">

</div>

Apply dimensions to the the parent (div) and image (img)

#root{
    width: 500px; /*as per your requirements*/
    height: 500px; /*as per your requirements*/
}

#image{
    width: 500px; /*as per your requirements*/
    height: 500px; /*as per your requirements*/
}

After that in your script

Using NPM

import {zoomImage} from 'adi-zoomimage'

window.addEventListener('load', ()=>{
    zoomImage({
        root: '#root', 
        image: '#image',
        zoom: 2
    })
})

Using CDN

<!-- insert the script tag in your HTML head section -->

window.addEventListener('load', ()=>{
    zoomImage({
        root: '#root', 
        image: '#image',
        zoom: 2
    })
})

Options