Monday, October 25, 2021

How to Build a Responsive Bootstrap Lightbox Gallery

How to Build a Responsive Bootstrap Lightbox Gallery

It’s time for another handy Bootstrap extension, folks! Today, we’ll build something that I’m sure many of you wish was integrated into Bootstrap by default.

How many times have you needed to add a responsive lightbox gallery to a Bootstrap project? In such a situation you might have tried an external JavaScript plugin like PhotoSwipe. However, you can create a simple yet fully functional responsive lightbox gallery by taking advantage of existing Bootstrap components. This tutorial will show you how to achieve this with minimal effort.

Although not required, good knowledge of Bootstrap will be beneficial to follow along with this tutorial.

Our Responsive Bootstrap Lightbox Extension

Without further ado, here’s what we’ll be creating (click an image to open the lightbox):

Get Thousands of Bootstrap Templates on Envato Elements

Check out Envato Elements for a huge collection of Bootstrap templates, website designs, and Bootstrap-based WordPress themes—unlimited downloads with your monthly subscription!

Bootstrap Templates on Envato ElementsBootstrap Templates on Envato ElementsBootstrap Templates on Envato Elements
Premium Bootstrap templates with your Envato Elements subscription

1. Define the HTML Markup

Create an Image Grid

To begin with, we’ll create an image grid to reveal the beauty of Ireland through some Unsplash images. To do this, we’ll take advantage of Bootstrap’s grid system.

All images should have the same dimensions. In our case, we’ll work with big ones (1920px x 1280px). These will appear as soon as the lightbox opens.

The image gridThe image gridThe image grid

Here’s the required structure for our grid:

Build the Modal Skeleton

We’ll continue by specifying a part of the markup needed for registering a full-screen Bootstrap modal. Its main content will be created dynamically and hold a Bootstrap carousel. 

2. Add Some Styles

Coming up next, we’ll add some styles for our project.

Most importantly:

  • The Bootstrap lightbox images will have a maximum height equal to the viewport height. Additionally, we’ll set their width to auto.
  • The carousel controls will be vertically centered, and their height won’t be equal to the carousel height (as happens by default with Bootstrap carousels). We do this because there will be an extra close button on the top right of the lightbox.

Here are the associated styles:

3. Create the Bootstrap Lightbox

Each time we click on a link, the modal will appear and contain a carousel. By combining the modal and carousel Bootstrap components, we can produce a solid lightbox gallery that will be responsive and support swipe and keyboard navigations.

The carousel markupThe carousel markupThe carousel markup

Here are some things for consideration:

  • We’ll generate the carousel markup only the very first time someone clicks on a link.
  • Every other time, there’s no need to recreate it and perform unnecessary actions. At that point, we’ll only need to use the carousel’s to() method for navigating directly to the appropriate slide.
  • The carousel won’t autoplay and its slides will change with a fade animation. 
  • Each slide will have an optional caption that will be determined by the data-caption attribute of the associated image. If an image doesn’t need a caption on the lightbox, just don’t place such an attribute. Note that we use a custom attribute instead of the default alt one for the image caption. The reason being that the first one is optional and might contain more detailed text compared to the second one that is always good to exist for accessibility reasons. But, you’re free to customize this behavior if you want.
  • The carousel images won’t contain the d-block and w-100 classes that exist on all Bootstrap code examples.

With all the above in mind, here’s the associated JavaScript code:

Our Responsive Bootstrap Lightbox is Complete!

That concludes another Bootstrap customization, folks! During this short journey, we first built an image grid and then covered the creation of a responsive lightbox gallery. Crucially, we created this lightbox by customizing only slightly existing Bootstrap components. I hope this has inspired you to create even more powerful Bootstrap lightboxes.

For optimal results, be sure to use images with equal dimensions, or else you’ll notice a small jump when the active slide changes.

Once again, here’s what we built:

If you want to go even further and familiarize yourselves with building custom lightboxes, have a look at another recent tutorial.

As always, thanks a lot for reading!

Learn to Customize Bootstrap Yourself

We’ve covered a lot of Bootstrap customizations over the years; take a look yourself!


No comments:

Post a Comment