Notable Pottery Manufacturer

    smooth-zoom
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    Smooth Zoom

    License NPM Version Known Vulnerabilities NPM Downloads Dependencies

    A light weight javascript library for zooming images like Medium, Google Photos and more.

    Zoom example

    👀 Demo

    Install

    npm install smooth-zoom
    # or
    yarn add smooth-zoom
    

    Usage

    Import with script tag

    <script src="node_modules/smooth-zoom/dist/zoom.min.js"></script>
    <!-- or -->
    <script src="https://cdn.jsdelivr.net/npm/smooth-zoom@latest/dist/zoom.min.js"></script>

    Import as module

    import Zoom from "smooth-zoom";

    And calling it with any css-selector, HTMLElement (or Array of it), and NodeList will make your image zoomed on click.

    // Css Selector
    Zoom(".zoomable");
    
    // HTMLElement || HTMLElement[]
    Zoom(document.querySelector(".zoomable"));
    
    Zoom([
        document.querySelector(".foo"),
        ...document.querySelectorAll(".zoomable"),
    ]);
    
    // NodeList
    Zoom(document.querySelectorAll(".zoomable"));

    Options

    Zoom(".zoomable", {
        background: "auto",
        onTransitionEnd: (img) => {
            img.src = img.src.replace(/-[0-9]+\.jpg/, ".jpg");
        },
    });
    Property Type Default Description
    background string rgba(0, 0, 0, 0.95) Image's background color.
    Use auto to get average color of the image
    useMaximumSize boolean true Find the longest width through image's natural width and srcset attribute
    onClick (img: HTMLImageElement) => void undefined Function that fires on click. Note that img is original image element.
    onTransitionEnd (img: HTMLImageElement) => void undefined Function that fires after zoom animation. Note that img is cloned image element.

    Methods

    zoom(img: HTMLImageElement) => void

    Zoom-in an image

    const zoom = Zoom();
    
    zoom.zoom(document.querySelector("img"));

    attach(target: string | HTMLElement | NodeList | HTMLElement[]) => void

    Make the target zoomed on click

    const zoom = Zoom(".zoomable", {
        background: "rgba(0, 0, 0, .3)",
    });
    
    zoom.attach(".more-elements");

    Install

    npm i smooth-zoom

    DownloadsWeekly Downloads

    51

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    24.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • marshallku