js-img-magnify v0.0.8

js-img-magnify

Pure JavaScript utility enabling magnifying glass effect on an images. No external dependencies required.

So you can use it in any web application, such as Vue, React,Angular, Svelte, or any other application.

support Typescript

Demo

view Demo

How to use

• npm or yarn

  • install

    npm i js-img-magnify
    # or
    yarn js-img-magnify

  • use

    import magnifyImg from 'js-img-magnify';
    import img from './assets/waterDrop.jpg';
    magnifyImg({
        src: img,   // or img url
        zoom: 3,
        target: document.getElementById('example'),
        width: 500, // img width, Can also '50%'
        MagnifyDomStyles: {"borderRadius":"50%","border":"4px solid red"},
        MagnifyDom: document.getElementById('show'),
        ...
    })

• cdn

  • install

    <script src="https://cdn.jsdelivr.net/npm/js-img-magnify@latest/lib/js-img-magnify.umd.js"></script>

  • use

    magnifyImg({
        src: imgURL,
        zoom: 3,
        target: document.getElementById('example'),
        width: 500, // img width, Can also '50%'
        MagnifyDom: document.getElementById('show'),
        ...
    })

Props