<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Sample by Mr. M. - Confederation College - IMD Program -->
<div class="container">
<div class="row">
<h3>Mr. M.'s Two Thumbnail popups using Twitter Bootstrap Modal</h3>
<p>
<span class="label label-danger">Thumbnail TIP</span>
<br>
<ul>
<li>Sometimes thumbnails are <strong>not</strong> just the same image shrunk down.
Try cropping out an interesting part of the larger image, and shrink that image down for the thumb. The mixer is just a shrunk thumbnail of entire image.
The lion is an example of a "crppped" thumbnail. <a href="http://bootsnipp.com/iframe/8ObW" target="_blank"><span class="glyphicon glyphicon-eye-open"></span>
View in separate window</a></li>
<li>TIP: Name your files mixer.jpg and mixer_t.jpg for easy programming. As you add more thumbs, make sure classes and id's are unique as shown in this example.</li>
</ul>
<hr>
<!--
Thumbnail link for mixer image
NOTE: data-target is .pop-up-1 for mixer, and .pop-up-2 for lion, these
classes must be unique
-->
<a href="#" data-toggle="modal" data-target=".pop-up-1">
<img src="http://i.imgur.com/YZ7AGyF.jpg" width="150" class="img-responsive img-rounded center-block" alt="">
</a>
<hr>
<!-- Thumbnail link for lion image -->
<a href="#" data-toggle="modal" data-target=".pop-up-2">
<img src="http://i.imgur.com/dtaHtds.jpg" width="150" class="img-responsive img-rounded center-block" alt="">
</a>
<hr>
<small>
Creative Commons image: <a href="http://tinyurl.com/flickrmixer">Desmond Talkington on Flickr.com (mixer) </a>
<br>
Creative Commons image: <a href="http://www.flickr.com/photos/fortherock/3898712750/sizes/z/">fortherock on Flickr.com (lion) </a>
<br>
<a href="http://tinyurl.com/tbvalid5" target="_blank">HTML 5 Valid</a>
</small>
<hr>
<!-- Modal content for the mixer image example -->
<div class="modal fade pop-up-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel-1">Mixer Board</h4>
</div>
<div class="modal-body">
<img src="http://i.imgur.com/YZ7AGyF.jpg.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal mixer image -->
<!-- Modal content for the lion image example -->
<div class="modal fade pop-up-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel-2">Lion</h4>
</div>
<div class="modal-body">
<img src="http://i.imgur.com/kzGVqbd.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal mixer image -->
</div> <!-- /.row -->
</div> <!-- /.container -->
