There are plenty of great lightbox plugins out there, but you can easily make your own lightbox gallery using Bootstrap. No custom JS needed! All you have to do is add a few data attributes to your markup.
Here?s an example in Codepen. Read on for a step-by-step.
Step 1: create your gallery.
This is simply a grid of pictures. With Bootstrap it could look something like this:
<div class=”row” id=”gallery”> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-1″> </div> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-2″> </div> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-3″> </div> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-4″> </div></div>
This is where you?ll need to add those data attributes.
- Add data-toggle=?modal? data-target=?#exampleModal? to the gallery element. This makes it so clicking anything in the gallery opens the lightbox (a.k.a. modal). data-target should be set to the id of the modal, which you will create later.
- Add data-target=?#carouselExample? data-slide-to=”0″ to each image (or image wrapper). data-target should be set to the id of the carousel, which you will create later. And data-slide-to should be set according to where the image is in the gallery. The first image is 0, the second is 1, the third is 2, etc.
So the gallery markup from above would look like this:
<div class=”row” id=”gallery” data-toggle=?modal? data-target=?#exampleModal?> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-1″ data-target=?#carouselExample? data-slide-to=”0″> </div> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-2″ data-target=?#carouselExample? data-slide-to=”1″> </div> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-3″ data-target=?#carouselExample? data-slide-to=”2″> </div> <div class=”col-6 col-md-4 col-lg-3″> <img class=”w-100″ src=”/image-4″ data-target=?#carouselExample? data-slide-to=”3″> </div></div>
Step 2: create the lightbox.
This is a carousel inside a modal, both are standard Bootstrap components. Nothing fancy here ? just copy the code from the Bootstrap docs and edit id?s/content as needed.
- The modal id should match the data-target of the gallery element.
- The carousel id should match the data-target of the images in the gallery.
- The carousel slides should match the gallery images and must be in the same order.
Using the values from our example gallery, it could look like this:
<div class=”modal fade” id=”exampleModal” tabindex=”-1″ role=”dialog” aria-hidden=”true”> <div class=”modal-dialog” role=”document”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”> <span aria-hidden=”true”>×</span> </button> </div> <div class=”modal-body”> <!– Carousel markup goes in the modal body –> <div id=”carouselExample” class=”carousel slide” data-ride=”carousel”> <div class=”carousel-inner”> <div class=”carousel-item active”> <img class=”d-block w-100″ src=”/image-1″> </div> <div class=”carousel-item”> <img class=”d-block w-100″ src=”/image-2″> </div> <div class=”carousel-item”> <img class=”d-block w-100″ src=”/image-3″> </div> <div class=”carousel-item”> <img class=”d-block w-100″ src=”/image-4″> </div> </div> <a class=”carousel-control-prev” href=”#carouselExample” role=”button” data-slide=”prev”> <span class=”carousel-control-prev-icon” aria-hidden=”true”></span> <span class=”sr-only”>Previous</span> </a> <a class=”carousel-control-next” href=”#carouselExample” role=”button” data-slide=”next”> <span class=”carousel-control-next-icon” aria-hidden=”true”></span> <span class=”sr-only”>Next</span> </a> </div> </div> <div class=”modal-footer”> <button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button> </div> </div> </div></div>
Step 3: crop images (optional)
This isn?t necessary, but if your images are different sizes you can crop them with CSS to keep things looking tidy.The height values in the example below can be tweaked as needed to fit your particular layout.
// Use Bootstrap breakpoints for consistency.$bootstrap-sm: 576px;$bootstrap-md: 768px;$bootstrap-lg: 992px;$bootstrap-xl: 1200px;// Crop thumbnail images.#gallery { img { height: 40vw; object-fit: cover; @media (min-width: $bootstrap-md) { height: 25vw; } @media (min-width: $bootstrap-lg) { height: 18vw; } }}// Crop images in lightbox..carousel-item { img { height: 60vw; object-fit: cover; @media (min-width: $bootstrap-sm) { height: 350px; } }}
That?s it!
All that?s left is to style your gallery and lightbox however you want.
