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.