Modern Image Zoom (Lightbox) In JavaScript

Category: Javascript , Modal & Popup | December 17, 2020
Author: mvoloskov
Views Total: 595 views
Official Page: Go to website
Last Update: December 17, 2020
License: MIT

Preview:

Modern Image Zoom (Lightbox) In JavaScript

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;
}

You Might Be Interested In:


Leave a Reply