Modern Image Zoom (Lightbox) In JavaScript

Preview:

Description:

A lightweight, blazing-fast, framework-agnostic JavaScript lightbox library for zooming image as you seen on popular blogging platforms like Medium.com.

How to use it:

1. Install & import the image zoom as an ES module.

# Yarn
$ yarn add mvoloskov/image-zoom
# NPM
$ npm i mvoloskov/image-zoom --save

import imageZoom from 'image-zoom'

2. Or load the compiled JavaScript image-zoom.js from dist folder.

<script src="dist/image-zoom.js"></script>

3. Initialize the library and it will automatically apply the image zoom effect to all images found within the document.

imageZoom()

4. Or determine which images should be opened in the lightbox.

imageZoom('img, svg')

5. Override the default styling of the image lightbox.

:root {
  overflow-x: hidden;
}
.image-zoom-wrapper::after {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(.25, .1, .25 ,1);
  display: block;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  z-index: 99998;
  pointer-events: none;
}
.image-zoom-wrapper.image-zoom-wrapper-zoomed::after {
  opacity: .6;
  cursor: zoom-out;
  pointer-events: all;
}
.image-zoom {
  transition: transform 300ms cubic-bezier(.25, .1, .25 ,1);
  cursor: zoom-in;
}
.image-zoom-zoomed {
  position: relative;
  z-index: 99999;
  cursor: zoom-out;
}