Author: | codeclou |
---|---|
Views Total: | 715 views |
Official Page: | Go to website |
Last Update: | June 29, 2020 |
License: | MIT |
Preview:

Description:
Bilderrahmen is a lightweight, easy-to-use JavaScript lightbox plugin that can be used to present your images and videos in a responsive gallery popup.
How to use it:
1. Install & download the package.
# NPM $ npm install bilderrahmen --save
2. Import the Bilderrahmen component.
import { Bilderrahmen } from 'bilderrahmen';
3. Or from a CDN.
import { Bilderrahmen } from 'https://cdn.jsdelivr.net/npm/bilderrahmen/bilderrahmen.es2015.es2015.js';
4. Initialize the component and we’re ready to go.
- data-bilderrahmen-video: path to your video
- data-bilderrahmen: unique ID used to group your images and videos
- data-bilderrahmen-title: custom title here
new Bilderrahmen({ // options here });
5. Add images and videos to the gallery lightbox.
<!-- Images --> <a href="original.jpg"> <img src="thumb.jpg" data-bilderrahmen="gallery-01" data-bilderrahmen-title="Image 1" /> </a> <!-- Videos --> <a href="1.mp4"> <img src="poster.jpg" data-bilderrahmen-video="1.mp4" data-bilderrahmen="gallery-01" data-bilderrahmen-title="Video 1" /> </a>;
6. Determine whether to close the gallery lightbox on click outside.
new Bilderrahmen({ closeOnOutsideClick: true });