JSFiddle - React, Tailwind, and code Playground
by Viruthagiri
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://jbutz.github.com/bootstrap-lightbox/assets/css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="http://jbutz.github.com/bootstrap-lightbox/assets/css/styles.css">
<script src="http://jbutz.github.com/bootstrap-lightbox/assets/js/scale.fix.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<script src="http://jbutz.github.com/bootstrap-lightbox/assets/js/bootstrap-lightbox.min.js"></script>
<!doctype html>
<html>
<head>
</head>
<body data-spy="scroll" data-target=".navbar">
<section id="demo">
<div class="container">
<div class="page-header">
<h1>Demo <small>See it in action!</small></h1>
</div>
<p>Click the thumbnail below to open the lightbox. This demo includes the optional <code>.lightbox-header</code> element, which adds a close button.</p>
<!-- -->
<div class="example">
<ul class="thumbnails">
<li class="span2">
<a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
<img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/small.png" alt="Click to view the lightbox">
</a>
</li>
</ul>
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-header'>
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class='lightbox-content'>
<img src="http://jbutz.github.com/bootstrap-lightbox/assets/img/large.png">
</div>
</div>
</div>
</div> </section>
</body>
</html>