Author: | mvoloskov |
---|---|
Views Total: | 3,861 views |
Official Page: | Go to website |
Last Update: | December 17, 2020 |
License: | MIT |
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; }