Lightbox functionality is enabled by the Magnific Popup plugin. A custom build has been created that will only handle images. If you need more functionality that this plugin can provide, please build your own using their Build Tool.
To use, insert <script src="/assets/js/magnific-popup.min.js"></script> at the end of your footer, after jQuery.
First, instantiate the lightbox by adding the .thumbnail-lightbox class to an HTML element.
<a href="../img/bryantdenny01_1920.jpg" class="thumbnail thumbnail-lightbox" title="The First Caption">
<img src="../img/bryantdenny01_1920.jpg" class="img-responsive" />
</a>
Next, you should initialize the popup with jQuery. Use the gallery:{enabled:true} option if images are part of a gallery.
$( '.thumbnail-lightbox' ).magnificPopup({type:'image'});
<div class="row">
<div class="col-md-4">
<a href="../img/bryantdenny01_1920.jpg" class="thumbnail thumbnail-lightbox" title="The First Caption">
<img src="../img/bryantdenny01_1920.jpg" class="img-responsive" />
</a>
</div> <!-- .col-md-4 -->
<div class="col-md-4">
<a href="../img/gorgaslibrary01_1920.jpg" class="thumbnail thumbnail-lightbox" title="The Second Caption">
<img src="../img/gorgaslibrary01_1920.jpg" class="img-responsive" />
</a>
</div> <!-- .col-md-4 -->
<div class="col-md-4">
<a href="../img/presidentsmansion01_1920.jpg" class="thumbnail thumbnail-lightbox" title="The Third Caption">
<img src="../img/presidentsmansion01_1920.jpg" class="img-responsive" />
</a>
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
$( '.thumbnail-lightbox' ).magnificPopup({
gallery : {
enabled: true
},
type:'image'
});