Tiny Smooth Image Zoom Library Inspired By Medium.com – Zoom.js

Category: Javascript , Zoom | May 16, 2021
Author: marshall-ku
Views Total: 148 views
Official Page: Go to website
Last Update: May 16, 2021
License: MIT

Preview:

Tiny Smooth Image Zoom Library Inspired By Medium.com – Zoom.js

Description:

Just another image zoom JavaScript library that shows images in a large size just as you’ve seen on Medium.com and Google Photos.

Features:

  • Smooth transitions.
  • Auto set the background color based on the average color of the image.
  • Zoom into a hi-res image you provide.

How to use it:

1. Install the package.

# Yarn
$ yarn add smooth-zoom

# NPM
$ npm i smooth-zoom

2. Import the Zoom.js as an ES module.

import Zoom from "smooth-zoom";

3. Directly load the JavaScript file from a CND.

<script src="https://cdn.jsdelivr.net/npm/smooth-zoom/dist/zoom.browser.js"></script>

4. Initialize the library on target images and done.

<img src="1.jpg" class="zoomable" alt="Image Alt" />
Zoom(".zoomable");

5. Determine the background color of the image. Default: black.

Zoom(".zoomable",{
  background: "auto"
});

6. Replace the image source when the image is opened.

Zoom(".zoomable",{
  originalizer: (src) => src.replace(/-[0-9]+\.jpg/, ".jpg"),
});

7. Attach the instance to another element.

const zoom = Zoom(".zoomable");
zoom.attach(".another-elements");

Changelog:

05/16/2021

  • Implement methods

05/16/2021

  • Allow to pass HTMLElement, NodeList for argument

02/18/2021

  • Update to remove image on resize

02/17/2021

  • Add style to hide original image

You Might Be Interested In:


Leave a Reply