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

Category: Javascript , Zoom | June 8, 2022
Author:marshall-ku
Views Total:198 views
Official Page:Go to website
Last Update:June 8, 2022
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. 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");

Changelog:

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

You Might Be Interested In:


Leave a Reply