GLightbox
Add responsive image galleries with GLightbox.
Overview
GLightbox is a lightweight, responsive lightbox library that supports images, videos, iframes, and inline content. It’s perfect for enhancing image galleries or media links.
To get started, include the required CSS and JavaScript via CDN:
<link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
Basic Example
This example shows a simple 3-column image gallery using Bootstrap’s grid system and GLightbox. Each image opens a larger version in a modal when clicked.
<div class="row g-2">
<div class="col-sm-4">
<a href="https://picsum.photos/id/432/1200/800" class="glightbox" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/432/300/300" class="img-fluid rounded" alt="Thumbnail of Image 1">
</a>
</div>
<div class="col-sm-4">
<a href="https://picsum.photos/id/16/1200/800" class="glightbox" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/16/300/300" class="img-fluid rounded" alt="Thumbnail of Image 2">
</a>
</div>
<div class="col-sm-4">
<a href="https://picsum.photos/id/436/1200/800" class="glightbox" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/436/300/300" class="img-fluid rounded" alt="Thumbnail of Image 3">
</a>
</div>
</div>
<div class="row g-2"> <div class="col-sm-4"> <a
href="https://picsum.photos/id/432/1200/800" class="glightbox"
data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/432/300/300" class="img-fluid rounded"
alt="Thumbnail of Image 1"> </a> </div> <div
class="col-sm-4"> <a href="https://picsum.photos/id/16/1200/800"
class="glightbox" data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/16/300/300" class="img-fluid rounded"
alt="Thumbnail of Image 2"> </a> </div> <div
class="col-sm-4"> <a href="https://picsum.photos/id/436/1200/800"
class="glightbox" data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/436/300/300" class="img-fluid rounded"
alt="Thumbnail of Image 3"> </a> </div> </div>
document.addEventListener('DOMContentLoaded', function () {
const lightbox = GLightbox({
selector: '.glightbox'
});
});
document.addEventListener('DOMContentLoaded', function () { const lightbox = GLightbox({
selector: '.glightbox' }); });
Custom Layout Example
This example shows a custom grid layout using rows and columns, showcasing 7 images in a responsive pattern.
<div class="row g-2">
<!-- Large image on the left -->
<div class="col-12 col-md-6">
<a href="https://picsum.photos/id/432/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/432/800/600" class="img-fluid rounded" alt="Thumbnail of Image 1">
</a>
</div>
<!-- Two stacked smaller images on the right -->
<div class="col-12 col-md-3 d-flex flex-column gap-2">
<a href="https://picsum.photos/id/16/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/16/400/295" class="img-fluid rounded" alt="Thumbnail of Image 2">
</a>
<a href="https://picsum.photos/id/436/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/436/400/295" class="img-fluid rounded" alt="Thumbnail of Image 3">
</a>
</div>
<!-- Another tall image on the right -->
<div class="col-12 col-md-3">
<a href="https://picsum.photos/id/439/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/439/400/600" class="img-fluid rounded" alt="Thumbnail of Image 4">
</a>
</div>
<!-- Three evenly sized images below -->
<div class="col-12 col-md-4">
<a href="https://picsum.photos/id/451/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/451/400/300" class="img-fluid rounded" alt="Thumbnail of Image 5">
</a>
</div>
<div class="col-12 col-md-4">
<a href="https://picsum.photos/id/448/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/448/400/300" class="img-fluid rounded" alt="Thumbnail of Image 6">
</a>
</div>
<div class="col-12 col-md-4">
<a href="https://picsum.photos/id/440/1200/800" class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/440/400/300" class="img-fluid rounded" alt="Thumbnail of Image 7">
</a>
</div>
</div>
<div class="row g-2"> <!-- Large image on the left --> <div
class="col-12 col-md-6"> <a
href="https://picsum.photos/id/432/1200/800" class="glightbox-3"
data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/432/800/600" class="img-fluid rounded"
alt="Thumbnail of Image 1"> </a> </div> <!-- Two stacked smaller
images on the right --> <div class="col-12 col-md-3 d-flex flex-column
gap-2"> <a href="https://picsum.photos/id/16/1200/800"
class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/16/400/295" class="img-fluid rounded"
alt="Thumbnail of Image 2"> </a> <a
href="https://picsum.photos/id/436/1200/800" class="glightbox-3"
data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/436/400/295" class="img-fluid rounded"
alt="Thumbnail of Image 3"> </a> </div> <!-- Another tall image on
the right --> <div class="col-12 col-md-3"> <a
href="https://picsum.photos/id/439/1200/800" class="glightbox-3"
data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/439/400/600" class="img-fluid rounded"
alt="Thumbnail of Image 4"> </a> </div> <!-- Three evenly sized
images below --> <div class="col-12 col-md-4"> <a
href="https://picsum.photos/id/451/1200/800" class="glightbox-3"
data-width="1200" data-height="800"> <img
src="https://picsum.photos/id/451/400/300" class="img-fluid rounded"
alt="Thumbnail of Image 5"> </a> </div> <div class="col-12
col-md-4"> <a href="https://picsum.photos/id/448/1200/800"
class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/448/400/300" class="img-fluid rounded"
alt="Thumbnail of Image 6"> </a> </div> <div class="col-12
col-md-4"> <a href="https://picsum.photos/id/440/1200/800"
class="glightbox-3" data-width="1200" data-height="800">
<img src="https://picsum.photos/id/440/400/300" class="img-fluid rounded"
alt="Thumbnail of Image 7"> </a> </div> </div>
document.addEventListener('DOMContentLoaded', function () {
const lightbox = GLightbox({
selector: '.glightbox-3'
});
});
document.addEventListener('DOMContentLoaded', function () { const lightbox = GLightbox({
selector: '.glightbox-3' }); });
Grouped Gallery Example
You can group multiple items together by using the same data-gallery value. GLightbox
will treat them as part of the same slideshow.
<div class="row g-2">
<div class="col-sm-4">
<a href="https://picsum.photos/id/1018/1200/800" class="glightbox-group" data-width="1200" data-height="800" data-gallery="nature">
<img src="https://picsum.photos/id/1018/300/300" class="img-fluid rounded" alt="Nature 1">
</a>
</div>
<div class="col-sm-4">
<a href="https://picsum.photos/id/1015/1200/800" class="glightbox-group" data-width="1200" data-height="800" data-gallery="nature">
<img src="https://picsum.photos/id/1015/300/300" class="img-fluid rounded" alt="Nature 2">
</a>
</div>
<div class="col-sm-4">
<a href="https://picsum.photos/id/1016/1200/800" class="glightbox-group" data-width="1200" data-height="800" data-gallery="nature">
<img src="https://picsum.photos/id/1016/300/300" class="img-fluid rounded" alt="Nature 3">
</a>
</div>
</div>
<div class="row g-2"> <div class="col-sm-4"> <a
href="https://picsum.photos/id/1018/1200/800" class="glightbox-group"
data-width="1200" data-height="800" data-gallery="nature">
<img src="https://picsum.photos/id/1018/300/300" class="img-fluid
rounded" alt="Nature 1"> </a> </div> <div
class="col-sm-4"> <a href="https://picsum.photos/id/1015/1200/800"
class="glightbox-group" data-width="1200" data-height="800"
data-gallery="nature"> <img
src="https://picsum.photos/id/1015/300/300" class="img-fluid rounded"
alt="Nature 2"> </a> </div> <div class="col-sm-4">
<a href="https://picsum.photos/id/1016/1200/800" class="glightbox-group"
data-width="1200" data-height="800" data-gallery="nature">
<img src="https://picsum.photos/id/1016/300/300" class="img-fluid
rounded" alt="Nature 3"> </a> </div> </div>
document.addEventListener('DOMContentLoaded', () => {
GLightbox({ selector: '.glightbox-group' });
});
document.addEventListener('DOMContentLoaded', () => { GLightbox({ selector:
'.glightbox-group' }); });
Embedded YouTube Video Example
GLightbox also supports YouTube videos. Simply provide a standard YouTube URL in the
href, and set data-type="video" to embed it within the lightbox.
GLightbox will automatically embed the player.
<div class="row g-2">
<div class="col-sm-6">
<a href="https://www.youtube.com/watch?v=es4x5R-rV9s" class="glightbox-4" data-type="video">
<img src="https://img.youtube.com/vi/es4x5R-rV9s/hqdefault.jpg" alt="YouTube Video Thumbnail" class="img-fluid rounded" />
</a>
</div>
</div>
<div class="row g-2"> <div class="col-sm-6"> <a
href="https://www.youtube.com/watch?v=es4x5R-rV9s" class="glightbox-4"
data-type="video"> <img
src="https://img.youtube.com/vi/es4x5R-rV9s/hqdefault.jpg" alt="YouTube Video
Thumbnail" class="img-fluid rounded" /> </a> </div> </div>
document.addEventListener('DOMContentLoaded', () => {
const lightbox = GLightbox({
selector: '.glightbox-4'
});
});
document.addEventListener('DOMContentLoaded', () => { const lightbox = GLightbox({
selector: '.glightbox-4' }); });
On this page
ESC