Author: | deoostfreese |
---|---|
Views Total: | 104 views |
Official Page: | Go to website |
Last Update: | February 6, 2021 |
License: | MIT |
Preview:

Description:
An accessible, touch-enabled, user-friendly image lightbox component written in plain JavaScript.
Features:
- Zoom in/out images on hover.
- Image loading indicator.
- Scroll or swipe to close just like Medium.com’s lightbox.
- Useful API methods and event handlers.
How to use it:
1. You can also install & download the package with NPM.
# NPM $ npm i react-spinners-css
2. Add references to Parvus JavaScript & CSS files.
<link rel="stylesheet" href="dist/css/parvus.min.css" /> <script src="dist/js/parvus.min.js"></script>
3. Create a new instance of the Parvus.js and pass the options as follows:
const prvs = new parvus({ // defaults selector: '.lightbox', lightboxLabel: 'This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.', lightboxLoadingIndicatorLabel: 'Image loading', swipeClose: true, scrollClose: true, threshold: 100, transitionDuration: 300, transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)' });
4. Apply the image lightbox to an image element. That’s it.
<a href="full.jpg" class="image-lightbox"> <img src="thumb.jpg" alt="Image Alt" /> </a>
imageSelector = document.querySelector('.image-lightbox'); prvs.add(imageSelector);
5. More API methods.
// remove an image element prvs.remove(element); // open the lightbox prvs.open(el); // close the lightbox prvs.close(); // destroy the instance prvs.destroy(destroy); // check if is open prvs.isOpen();
6. Bind/unbind event listeners.
// prvs.on(eventName, listener) // prvs.off(eventName, listener) prvs.on('open', listener); prvs.on('close', listener); prvs.on('destroy', listener);
Changelog:
02/06/2021
- Use rem instead of px