Bootstrap Modal Window Gallery

Description:

For this code demo we're using a single Bootstrap Modal Window and populating it with images and titles using jQuery. Only one set of images is required. These are the Bootstrap classes we will be using:

list-inline
img-thumbnail
img-responsive
glyphicon

Responsive Gallery Demo

Click or tap thumbnail sized images to see the actual image inside a Modal Window. The placeholder images in this demo are from placeimg.com.

Add HTML to your <body> tag:

<!--Insert full-sized images below-->
<ul list-inline myGallery">
  <li><img class="img-thumbnail" title="Image 1" src="https://placeimg.com/600/400/nature/1"></li>
  <li><img class="img-thumbnail" title="Image 2" src="https://placeimg.com/600/400/nature/2"></li>
  <li><img class="img-thumbnail" title="Image 3" src="https://placeimg.com/600/400/nature/3"></li>
  <li><img class="img-thumbnail" title="Image 4" src="https://placeimg.com/600/400/nature/4"></li>
  <li><img class="img-thumbnail" title="Image 5" src="https://placeimg.com/600/400/nature/5"></li>
  <li><img class="img-thumbnail" title="Image 6" src="https://placeimg.com/600/400/nature/6"></li>
  <li><img class="img-thumbnail" title="Image 7" src="https://placeimg.com/600/400/nature/7"></li>
  <li><img class="img-thumbnail" title="Image 8" src="https://placeimg.com/600/400/nature/8"></li>
</ul>
</ul>

<!--insert Bootstrap Modal-->
<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-header">
   <button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button>
   </div><!--modal-header-->
   <div class="modal-body">

<!--JQUERY WILL POPULATE THIS WITH IMAGES-->

   </div><!--modal-body-->
   <div class="modal-footer">

<!--JQUERY WILL POPULATE THIS WITH IMAGE TITLES-->

   </div><!--modal-footer-->
  </div><!--modal-content-->
 </div><!--modal-dialog-->
</div><!--modal-->

Add this CSS code to your custom stylesheet:

.myGallery li {
  width: 50%;
  margin-left: 2%;
  cursor: pointer;
}
/* Special Rules for md / lg screens */
@media only screen and (min-width: 769px) {
.myGallery li {
  padding: 0.25%;
  width: 22%; /**adjust width as desired**/
  }
}
/**Bootstrap overrides**/
.modal-header {border:none}
.modal-footer {text-align:left}

If your document doesn't already contain them, add links to Bootstrap & jQuery.

Add Bootstrap CSS to your <head> tag.

<!--Bootstrap-->  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Add JS libraries above your closing </body> tag.

<!--Latest stable release of jQuery Library-->
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>    
<!--Bootstrap JS-->  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Finally, add this jQuery function below the JS libraries. This <script> must come after jQuery has loaded.

<script>  
//invoke myGallery images to open in the modal window  
$(document).ready(function(){    
$('.myGallery li img').on('click',function(){     
  var src = $(this).attr('src');     
  //Get this image and change class to img-responsive      
  var img = '<img src="' + src + '" class="img-responsive"/>';     
  var title = $(this).attr('title');     
  $('#myModal').modal();     
  $('#myModal').on('shown.bs.modal', function(){     
  //write this image into modal-body     
  $('#myModal .modal-body').html(img);    
  //write this image title into modal-footer     
  $('#myModal .modal-footer').html(title);       
  });     
  $('#myModal').on('hidden.bs.modal', function(){    
  //when hidden, empty content from both     
  $('#myModal .modal-body').html('');     
  $('#myModal .modal-footer').html('');       
  });    
  });  
})  
</script>

And there you have it. Hope you enjoyed this basic demonstration with a Bootstrap Modal Window, image classes and jQuery.

Custom Web Design & Development