Tiny Image & Video Image Gallery Lightbox In JavaScript – Bilderrahmen

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