Tiny Image & Video Image Gallery Lightbox In JavaScript – Bilderrahmen

Category: Gallery , Javascript , Modal & Popup | June 29, 2020
Views Total:723 views
Official Page:Go to website
Last Update:June 29, 2020


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 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-title="Image 1"
<!-- Videos -->
<a href="1.mp4">
  <img src="poster.jpg"
      data-bilderrahmen-title="Video 1"

6. Determine whether to close the gallery lightbox on click outside.

new Bilderrahmen({
    closeOnOutsideClick: true

You Might Be Interested In:

Leave a Reply