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