Fluid Responsive Photo Gallery with jQuery and Bootstrap

A super lightweight JavaScript plugin that creates a responsive, flexible thumbnail gallery using Bootstrap grid system and displays large version of the image in a lightbox slider using Bootstrap modal component. Supports both Bootstrap 3 and Bootstrap 4.

How to use it:

1. Include the Bootstrap Photo Gallery's script in your Bootstrap project which has jQuery library included.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/photo-gallery.js"></script>

2. Add images to the photo gallery using Bootstrap grid system.

<ul class="row">

  <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
      <img class="img-responsive" src="1.jpg">
      <div class="text">Caption 1</div>
  </li>
  <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
      <img class="img-responsive" src="2.jpg">
      <div class="text">Caption 2</div>
  </li>

  <li class="clearfix visible-sm-block"></li>

  <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
      <img class="img-responsive" src="3.jpg">
      <div class="text">Caption 3</div>
  </li>

  <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
      <img class="img-responsive" src="4.jpg">
      <div class="text">Caption 4</div>
  </li>

  ...

</ul>

3. Create a Bootstrap modal to showcase all the large images in a popup slider.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

4. Default plugin settings.

$('ul.row').bsPhotoGallery({
  'classes' : 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
  'showControl' : true,
  'hasModal' : true, 
  'fullHeight' : true,
  'iconClose' : 'glyphicon glyphicon-remove-circle',
  'iconLeft' : 'glyphicon glyphicon-chevron-left',
  'iconRight' : 'glyphicon glyphicon-chevron-right'
});

Changelog:

2019-06-27

• security fix

2018-01-31

• fixed issue with modal in safari issue

2018-01-08

• converted imgs to embedded svg

2018-01-07

• added svg icons to replace glyphicons
• updated for Bootstrap 4

2017-07-14

• added show Control setting

2017-01-04

• Fixed bug that overwrote images in other modals

2016-07-08

• Added more options.

2016-06-25

• Added external CSS, large modal, icons for prev next, modal titles and text

2015-12-14

• added support for showing a different / larger image in modal

2015-11-15

• update.

---

This awesome jQuery plugin is developed by michaelsoriano. For more Advanced Usages, please check the demo page or visit the official website.