<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> <link rel="stylesheet" href="https://blueimp.github.io/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.css"> <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> <div id="blueimp-gallery" class="blueimp-gallery"> <!-- The container for the modal slides --> <div class="slides"></div> <!-- Controls for the borderless lightbox --> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> <!-- The modal dialog, which will be used to wrap the lightbox content --> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" aria-hidden="true">×</button> <h4 class="modal-title"></h4> </div> <div class="modal-body next"></div> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left prev"> <i class="glyphicon glyphicon-chevron-left"></i> Previous </button> <button type="button" class="btn btn-primary next"> Next <i class="glyphicon glyphicon-chevron-right"></i> </button> </div> </div> </div> </div> </div> <div id="links"> <a href="http://www.deshow.net/d/file/travel/2009-04/scenic-beauty-of-nature-photography-2-504-4.jpg" title="Banana" data-gallery> <img src="http://www.deshow.net/d/file/travel/2009-04/scenic-beauty-of-nature-photography-2-504-4.jpg" alt="Banana"> </a> <a href="http://www.indiaonrent.com/forwards/n/nature-beauty-amazing/res/5mavuy.jpg" title="Apple" data-gallery> <img src="http://www.indiaonrent.com/forwards/n/nature-beauty-amazing/res/5mavuy.jpg" alt="Apple"> </a> <a href="http://www.wallpapersxl.com/wallpapers/1920x1080/nature-girls/170953/nature-girls-beauty-with-star-tattoo-and-flower-cute-girl-widescreen-170953.jpg" title="Orange" data-gallery> <img src="http://www.wallpapersxl.com/wallpapers/1920x1080/nature-girls/170953/nature-girls-beauty-with-star-tattoo-and-flower-cute-girl-widescreen-170953.jpg" alt="Orange"> </a> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> <script src="https://blueimp.github.io/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.js"></script>

#links a img {width:200px;height:200px;}