smooth-zoom

A light weight javascript library for zooming images.

Usage no npm install needed!

<script type="module">
  import smoothZoom from 'https://cdn.skypack.dev/smooth-zoom';
</script>

README

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", {
    originalizer: (src) => src.replace(/-[0-9]+\.jpg/, ".jpg"),
    background: "auto",
});
Property Type Default Description
originalizer (src: string) => string (src) => src Change images' src to original src
background string rgb(0, 0, 0) Image's background color.
Use "auto" to get average color of the image

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");