Search for a command to run...
This tiny, convenient package makes adding lightbox galleries effortless.
i'm trav
i've also been known to make music
No comments yet. Be the first to comment.
I've always been intrigued by browser extensions and their ability to do crazy things and make the web cooler + get rid of ads. That said, going from concept to a working Chrome extension can be super annoying with repetitive setup tasks, configurati...
This is going to be a "quick" little guide to customizing the tmux status bar to include a scrolling Spotify “Now Playing” widget. I’m going to be doing this on macOS, but you should be able to adapt it to Linux and I'll try to assist where I can. If...
Go From Freelancer to Corporate Sellout In 43 Easy Steps
An overview of one of the most popular and loved programming languages.
The Importance of Mental Health as a Developer
Back when I was using Bootstrap 4, I always reached for a package called “Ekko Lightbox” for creating simple lightbox galleries. When I migrated to Bootstrap 5, it seemed that I was out of luck since that package hadn’t been updated. I didn’t want to import jQuery into my project, and I didn’t want a bloated package that would make my site slow. I scoured the internet, but kept reaching dead ends.
After a few hours of frustration, I thought, “Why not just make my own package that I can reuse on my clients’ websites?” This prompted me to make the solution (or rather, solutions) that I’ll be going over in this article.
This might be obvious, but before we get started you’ll need a project that uses Bootstrap 5, or you can use something like codepen.io to create a sandbox environment. Here I will be using the Bootstrap 5 CDN.
This lightweight package makes creating lightbox galleries quick, easy, and familiar. If you used Ekko Lightbox in the past, then you will already know how to setup Lightbox for Bootstrap 5 (aka bs5-lightbox). Best of all, it’s only 2.8Kb zipped (via Bundlephobia), so it won’t slow down your site.
We will be using the CDN from jsDelivr in these examples, but you can use the NPM Package if you prefer.
To get started, make sure you have Bootstrap 5 styles added inside the <head> of your HTML document:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Then make sure the scripts are included before the closing </body> tag:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Add the CDN script for bs5-lightbox after the Bootstrap script tag:
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.0/dist/index.bundle.min.js" integrity="sha256-zFbZ1Ykp6EzYM4IOMstebe2Gqoxz8ML85LP4JGcA+eA=" crossorigin="anonymous"></script>
To create a lightbox gallery we just need to create some images and add data attributes. Here is a simple example:
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
</a>
</div>
More examples and options can be found at the Lightbox for Bootstrap 5 Documentation.
This article may be a little short, but that's just a testament to how easy this is to use! There are quite a few more features and options available, but this is the easiest way to get a Bootstrap 5 Lightbox up and running.
If you found this useful then make sure you follow me for more tips and tools like this!
(Prefer to use NPM? I will be writing another article soon to accompany this one where I will go into more detail explaining bs5-lightbox's options and features.)