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.
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!
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.
Here’s the required structure for our grid:
<section class="image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img src="ireland1.jpg" class="img-fluid" alt="Ring of Kerry, County Kerry, Ireland" data-caption="Ring of Kerry, County Kerry, Ireland">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img src="ireland2.jpg" class="img-fluid" alt="Fintown, Ireland" data-caption="Fintown, Ireland">
</a>
</figure>
</div>
<!-- more columns here -->
</div>
</div>
</section>
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.
<div class="modal lightbox-modal" id="lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="container-fluid p-0">
<!-- JS content here -->
</div>
</div>
</div>
</div>
</div>
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:
/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--yellow: #fffbbc;
--lightbox: #242424;
}
body {
margin: 24px 0 48px;
font: 20px / 28px "Marck Script", cursive;
}
/* IMAGE GRID STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.image-grid figure {
margin-bottom: 0;
}
.image-grid img {
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s;
}
.image-grid a:hover img {
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}
/* LIGHTBOX STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-modal .modal-content {
background: var(--lightbox);
}
.lightbox-modal .btn-close {
position: absolute;
top: 20px;
right: 18px;
font-size: 1.2rem;
z-index: 10;
}
.lightbox-modal .modal-body {
display: flex;
align-items: center;
padding: 0;
text-align: center;
}
.lightbox-modal img {
width: auto;
max-height: 100vh;
max-width: 100%;
}
.lightbox-modal .carousel-caption {
left: 0;
right: 0;
bottom: 0;
background: rgba(36, 36, 36, 0.75);
}
.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
top: 50%;
bottom: auto;
transform: translateY(-50%);
width: auto;
}
.lightbox-modal .carousel-control-prev {
left: 10px;
}
.lightbox-modal .carousel-control-next {
right: 10px;
}
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.
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-captionattribute 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 defaultaltone 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-blockandw-100classes that exist on all Bootstrap code examples.
With all the above in mind, here’s the associated JavaScript code:
const imageGrid = document.querySelector(".image-grid");
const links = imageGrid.querySelectorAll("a");
const imgs = imageGrid.querySelectorAll("img");
const lightboxModal = document.getElementById("lightbox-modal");
const bsModal = new bootstrap.Modal(lightboxModal);
const modalBody = document.querySelector(".modal-body .container-fluid");
for (const link of links) {
link.addEventListener("click", function (e) {
e.preventDefault();
const currentImg = link.querySelector("img");
const lightboxCarousel = document.getElementById("lightboxCarousel");
if (lightboxCarousel) {
const parentCol = link.parentElement.parentElement;
const index = [...parentCol.parentElement.children].indexOf(parentCol);
const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
bsCarousel.to(index);
} else {
createCarousel(currentImg);
}
bsModal.show();
});
}
function createCarousel(img) {
const markup = `
<div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${createSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
modalBody.innerHTML = markup;
}
function createSlides(img) {
let markup = "";
const currentImgSrc = img.getAttribute("src");
for (const img of imgs) {
const imgSrc = img.getAttribute("src");
const imgAlt = img.getAttribute("alt");
const imgCaption = img.getAttribute("data-caption");
markup += `
<div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
<img src=${imgSrc} alt=${imgAlt}>
${imgCaption ? createCaption(imgCaption) : ""}
</div>
`;
}
return markup;
}
function createCaption(caption) {
return `<div class="carousel-caption">
<p class="m-0">${caption}</p>
</div>`;
}
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.
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