Bootstrap lightbox – An extension of modal dialog component: 4 demos

What is Bootstrap lightbox plug-in?

In the Modal component of Bootstrap framework, I explained how you may create useful modal dialogs with different options like buttons and different behaviors.

In this tutorial, I will show you creating lightbox based at the modal component. For that, I will use a plug-in that enables us creating lightbox easily.

The plug-in is “Bootstrap 3 lightbox”, that you may download from the github website or you may include links of the library (JS and CSS) via CDN (links are given below).

By using this plug-in, you may create the lightbox with images or image galleries. It also enables using YouTube or videos from other sources. I will show you demos of each in the following section.

Setting up Bootstrap 3 lightbox

As such, this lightbox plug-in is based at Bootstrap Modal plug-in, you have to include the complete Bootstrap 3 or only the Modal plug-in’s library. It also requires including the jQuery library.

After including these libraries, either refer the CDN links for Bootstrap 3 lightbox plug-in:

The link: cdnjs

Or, download its JS and CSS libraries and host it at your own hosting.

Include all these libraries just above the </body> tag:

 <script src=”//code.jquery.com/jquery.js”></script>

<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>

<script src=”//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js”></script>

An example of image lightbox with caption

In this example, a lightbox is created with a single image that also has a heading and text in the footer. See a demo online:

Bootstrap lightbox

See online demo and code

The following markup is used:

 

The script:

 

Creating a lightbox with image gallery

If you have more than one images to shown in a lightbox, you can do that by using the Bootstrap 3 lightbox plug-in as well. The default arrows will appear to let users navigate through the gallery.

See a demo online where I used 5 images:

Bootstrap lightbox gallery

See online demo and code

You can see the complete code in the demo page left panel including markup and script.

Using events demo

Whether using single or galleries lightbox, you may trigger some action as a certain event happens in lightbox. For instance, the onContentLoaded event fires as the content like images, gallery or videos are fully loaded.

Similarly, the onShown event fires just before showing the image or other content. You may place the certain code for performing some action as these events occur.

In this demo, I will simply display alert messages as onShown and onContentLoaded events occur while using the first example (i.e. single image lightbox).

Bootstrap lightbox events

See online demo and code

This is how events code is used at the script section:

 

You can see the complete code in the demo page.

Similarly, you may use the onNavigate event as using the galleries for navigation images.

A demo of showing video in lightbox Bootstrap

You may show videos by using lightbox demo as single or as a gallery. The video source can be different including YouTube, Vimeo etc.

See the following demo where a video from the YouTube is referenced. As you click the link to open the lightbox, the video will run:

Bootstrap lightbox video

See online demo and code

The code for adding a video in the demo:

 

You see, it just require adding the YouTube video link, that’s it. The rest of the code in the <script> part is same as used for images or gallery demo.