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

Preview:

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. Determine whether to find the longest width through image’s natural width and srcset attribute. Default: true.

Zoom(".zoomable",{
  useMaximumSize: false,
});

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

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

8. Fire a function on click.

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

9. Attach the instance to another element.

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

Changelog:

v1.4.1 (07/16/2023)

• Update

v1.2.2 (06/08/2022)

• Update package

v1.2.1 (04/17/2022)

• Fixed: Ensure transition effect

v1.2.0 (04/12/2022)

• Add onClick option
• Update packages

v1.1.4 (02/27/2022)

• Prevent maxWidth from becoming -Infinity
• Add useMaximumSize option

v1.1.3 (02/27/2022)

• Fix maxWidth filtering method
• Use requestAnimationFrame for transition
• Fix types
• Update background color and opacity of .zoom-bg
• Remove screenSize
• Improve operation time of getAverageRGB

v1.1.2 (02/26/2022)

• Fix typo

v1.1.1 (02/25/2022)

• Simplify scale calculation
• Update return type of getAverageRGB
• Refactor getAverageRGB
• Remove will-change property
• Use spread syntax instead Array.prototype.reduce
• Simplify getting head element

v1.1.0 (02/25/2022)

• originalizer has been removed. You can use onTransitionEnd instead.

v1.0.2 (01/19/2022)

• Simplify calcululation of max width
• Update event listener options
• Don’t use offsetWidth for style recalculation

01/12/2022

• v1.0.0

01/01/2022

• Remove logical and operator

12/30/2021

• Fixed options

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