Author: | deoostfreese |
---|---|
Views Total: | 101 views |
Official Page: | Go to website |
Last Update: | July 21, 2023 |
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.
- Image counter.
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({ // All elements with this class triggers Parvus selector: '.lightbox', // All `selector` in this `gallerySelector` are combined as a gallery. Overwrites the `data-group` attribute gallerySelector: null, // Display captions, if available captions: true, // Set the element where the caption is. Set it to "self" for the `a` tag itself captionsSelector: 'self', // Get the caption from given attribute captionsAttribute: 'data-caption', // Click outside to close Parvus docClose: true, // Scroll to close Parvus scrollClose: false, // Swipe up/ down to close Parvus swipeClose: true, // Accepting mouse events like touch events (click and drag to change slides) simulateTouch: true, // Touch dragging threshold (in px) threshold: 100, // Set focus back to trigger element after closing Parvus backFocus: true, // Browser scrollbar visibility hideScrollbar: true, // Specifies how many milliseconds (ms) the transition effects takes to complete transitionDuration: 300, // Specifies the speed curve of the transition effects transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)', // Icons lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>', previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>', nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>', closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>', // Localization of strings l10n: en, // Regular expression for supported image file types fileTypes: /\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i });
4. Apply the image lightbox to an image element. That’s it.
<a href="full.jpg" class="image-lightbox" data-caption="Caption Here"> <img src="thumb.jpg" alt="Image Alt" /> </a>
imageSelector = document.querySelector('.image-lightbox'); prvs.add(imageSelector);
6. Create a gallery lightbox by grouping your images using the ‘data-group’ attribute or ‘gallerySelector’ option.
<a href="1.jpg" class="lightbox" data-group="Berlin"> <img src="1.jpg" alt=""> </a> <a href="2.jpg" class="lightbox" data-group="Berlin"> <img src="2.jpg" alt=""> </a> <a href="3.jpg" class="lightbox" data-group="Kassel"> <img src="3.jpg" alt=""> </a>
7. More API methods.
// add an image element prvs.add(element); // 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(); // get the current index prvs.currentIndex(); // go to the prev image prvs.previous(); // go to the next image prvs.next(); // select a slide prvs.select(index);
6. Bind/unbind event listeners.
// prvs.on(eventName, listener) // prvs.off(eventName, listener) prvs.on('open', listener); prvs.on('close', listener); prvs.on('select', listener); prvs.on('destroy', listener);
Changelog:
v2.4.0 (07/21/2022)
- Added Option to hide the browser scrollbar
- Added an internal function to create and dispatch a new event.
- Disabled buttons are no longer visually hidden.
- Focus is no longer moved automatically.
- CSS styles are now moved from SVG to the actual elements.
- Updated the development dependencies to the latest versions.
- Removed Custom typography styles.
- Fixed Load the srcset before the src, add sizes attribute
v2.3.3 (05/31/2022)
- Animate current image and set focus back to the correct element in the default behavior of the backFocus option
- Set focus back to the correct element in the default behavior of the backFocus option.
- Fixed The navigation buttons’ visibility.
v2.3.0 (05/28/2022)
- Added Necessary outputs for screen reader support.
- Added CSS custom properties for captions and image loading error messages.
- Replaced the custom copyObject() function with the built-in structuredClone() method for improved performance and reliability.
- Refactored code and comments to improve readability and optimize performance.
- Updated the development dependencies to the latest versions.
- Removed The option for supported image file types as it is no longer necessary.
- Removed The scrollClose option.
- Fixed Non standard URLs can break Parvus.
v2.2.0 (11/30/2022)
- Fix Safari background scrolling
- Use arrow functions
- Use CSS logical properties
- Update dev dependencies
v2.1.0 (07/07/2022)
- Add option to accept mouse events like touch events (click and drag to change slides)
v2.0.4 (01/21/2022)
- Add aria-labelledby for slides with captions
- Improvements
- Clean up
v2.0.3 (01/19/2022)
- Fix issue when loading an image for the first time
- Improvements
v2.0.2 (01/19/2022)
- Use box-sizing: border-box
- Fix issue with duplicate slides
v2.0.1 (01/18/2022)
- Fix issue with slides without caption
- Fix new “reset groups” disaster
v2.0.0 (01/18/2022)
- Update dev dependencies
- Remove own focus style
- Add more options for captions
- Breaking change Refactor localization
- Add toolbar container for future functions
- Fix: Add function to calculate image
v1.4.1 (09/30/2021)
- Update dev dependencies