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

| propName | type | required |desc | default | | --- | --- | --- |--- |--- | | src | string | true | img tag src prop | | | zoom | number | false| magnification times | 3 | |target | HTMLElement| true | target HTMLElement || |width | string/number | false | imgTag width，100 or "50%" | "auto" | |MagnifyDomWidth| number| false| js created magnifying glass dom, if MagnifyDom has value, This will not work. | 200| |MagnifyDomStyles|partialCSSStyleDeclaration|false|it will merge js created magnifying glass dom styles, if MagnifyDom has value, This will not work | {} | |MagnifyDom| HTMLElement| false | user custom magnify Dom | |overflow | Boolean | false | Whether or not to allow exceeding the image range at the image edges | true |