Tiny Image & Video Image Gallery Lightbox In JavaScript – Bilderrahmen

Category: Gallery , Javascript , Modal & Popup | June 29, 2020
Author:codeclou
Views Total:715 views
Official Page:Go to website
Last Update:June 29, 2020
License:MIT

Preview:

Tiny Image & Video Image Gallery Lightbox In JavaScript – Bilderrahmen

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

You Might Be Interested In:


Leave a Reply