JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<body>. . .
<div class="container marketing">
<div class="row">
<div class="col-md-12">
<!--slideshowarea-->
<div class="col-md-offset-2 col-md-10">
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<!-- 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>
</div>
<!-- blueimp-gallery -->
<!--links-->
<div id="links">
<div class="row">
<div class="col-md-12" id="links1row"> <a href="http://placehold.it/400x400&text=Photo+1" title="Banana">
<img src="http://placehold.it/100x100&text=Thumbnail-1" alt="Banana" class="img-thumbnail">
</a>
<a href="http://placehold.it/400x400&text=Photo+2" title="Apple">
<img src="http://placehold.it/100x100&text=Thumbnail-2" alt="Apple" class="img-thumbnail">
</a>
<a href="http://placehold.it/400x400&text=Photo+3" title="Orange">
<img src="http://placehold.it/100x100&text=Thumbnail-3" alt="Orange" class="img-thumbnail">
</a>
<a href="http://placehold.it/400x400&text=Photo+4" title="Banorapple">
...
JavaScript
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link,
event: event
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};