Building beautiful responsive image galleries in your twitter bootstrap application is now super-easy with the awesome blueimp image gallery plug-in. Using this plug-in you can easily build touch friendly and responsive image or video gallery viewable for both mobile and desktops. Galleries are a great way to showcase your products or services and here we'll see in this bootstrap tutorial, how to build responsive image gallery with slideshow and light box effect in bootstrap.
How to Build Responsive Image Gallery with Lightbox in Twitter Bootstrap?
Follow the below step by step instructions to build the sliding lightbox image gallery.
Step-1: To create the light box image gallery in bootstrap, we need two libraries. First download the Blueimp Gallery and Bootstrap Image Gallery and extract its contents. Both of the folders will contain the “css”, “image” and “js” sub folders. Move those folders to your working directory.
Step-2: Next create html file and add this meta tag to its header section to make the webpage responsive.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Step-3: Next link the bootstrap, blueimp gallery and bootstrap image gallery css files to the web page.
<head>
...
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<!-- link the blueimp image gallery css file -->
<link rel="stylesheet" href="/path/to/blueimp-gallery.min.css" />
<!-- link the blueimp bootstrap image gallery css file -->
<link rel="stylesheet" href="/path/to/bootstrap-image-gallery.min.css" />
</head>
Step-4: Then load the jquery, bootstrap, blueimp gallery and bootstrap image gallery's javascript libraries above the closing body tag (</body>).
<body>
...
<script src="/path/to/jquery-1.10.2.min.js"></script>
<!-- load bootstrap javascript library -->
<script src="/path/to/bootstrap.min.js"></script>
<!-- load blueimp image gallery javascript library -->
<script src="/path/to/jquery.blueimp-gallery.min.js"></script>
<!-- load bootstrap image gallery javascript library -->
<script src="/path/to/bootstrap-image-gallery.min.js"></script>
</body>
Step-5: Next add this html markup inside the <body></body> section to create the popup gallery light box.
<!-- Bootstrap Image Gallery Popup Light Box -->
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- Modal Box Container -->
<div class="slides"></div>
<!-- Lightbox Controls -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- Modal Box -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i> Prev
</button>
<button type="button" class="btn btn-default next">Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
Step-6: Now add a list of image files you want to appear in the gallery in a grid format and make the images responsive to fit to the mobile view.
<!--Add Gallery Images in Grid Layout -->
<div class="row">
<div class="col-md-12">
<h2 class="text-center">Bootstrap Responsive Image Gallery</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="images/bt-gallery/nature1.jpg" title="nature image 1" data-gallery>
<img src="images/bt-gallery/nature1.jpg" alt="nature image 1" class="img-responsive" />
</a>
<p class="muted text-center">Lorem ipsum dolem</p>
</div>
<div class="col-md-4">
<a href="images/bt-gallery/nature2.jpg" title="nature image 2" data-gallery>
<img src="images/bt-gallery/nature2.jpg" alt="nature image 2" class="img-responsive" />
</a>
<p class="muted text-center">Lorem ipsum dolem</p>
</div>
<div class="col-md-4">
<a href="images/bt-gallery/nature3.jpg" title="nature image 3" data-gallery>
<img src="images/bt-gallery/nature3.jpg" alt="nature image 3" class="img-responsive" />
</a>
<p class="muted text-center">Lorem ipsum dolem</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="images/bt-gallery/nature4.jpg" title="nature image 4" data-gallery>
<img src="images/bt-gallery/nature4.jpg" alt="nature image 4" class="img-responsive" />
</a>
<p class="muted text-center">Lorem ipsum dolem</p>
</div>
<div class="col-md-4">
<a href="images/bt-gallery/nature5.jpg" title="nature image 5" data-gallery>
<img src="images/bt-gallery/nature5.jpg" alt="nature image 5" class="img-responsive" />
</a>
<p class="muted text-center">Lorem ipsum dolem</p>
</div>
<div class="col-md-4">
<a href="images/bt-gallery/nature6.jpg" title="nature image 6" data-gallery>
<img src="images/bt-gallery/nature6.jpg" alt="nature image 6" class="img-responsive" />
</a>
<p class="muted text-center">Lorem ipsum dolem</p>
</div>
</div>
Adding the bootstrap css image class "img-responsive" to all the <img> tags will make the images responsive and resize them to fit to the mobile, tablet and desktop screen.
Now open the webpage in browser and you can see a beautiful image gallery with neatly arranged thumbnails in grid layout.
Clicking one of the images will pop up a light box with sliding controls like this.
As I have said this is a responsive image gallery, this is how the image gallery will look like in mobile view.
Read:
- How to Build Responsive Carousel Slider in Bootstrap
- How to Create Custom Responsive Navigation Menu in Bootstrap
And like that you can easily create a complete responsive image gallery in bootstrap without hassle.
