Bootstrap lightbox Premium component
Advanced LightBox component which let you create a stunning and responsive gallery.
Basic example
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Initialization required
To use our Lightbox you have to initialize it in your project with the code below.
Initialization code:
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
Predefined image size
MDB LightBox uses the same image in 2 different sizes: thumbnail and large.
Such an approach let you increase the performance of your website.
<figure class="col-md-4">
<!--Large image-->
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
<!-- Thumbnail-->
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid">
</a>
</figure>
Important:
1. data-size attribute should be the same as the size of the Large Image
2. Thumbnail and Large Image should have the same ratio
3. Thumbnail should be 544px wide
4. Large image shouldn't be wider than 1800px
Lightbox Gallery example:
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-margin">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(111).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(111).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(112).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(112).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(66).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(66).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(5).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(5).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(46).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(46).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(113).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(113).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(51).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(9).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(9).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(11).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(11).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
Gallery with margins
Remove .no-margin class to add a margins to your images.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(42).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(42).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(43).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(43).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(45).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(46).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(46).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(47).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(48).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(49).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(49).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(51).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>