Lightbox

Lightbox Image

Lightboxes are integrated in Nirvana. It allows you to display an thumbnail and when clicked, the original image will popped up.
The lightbox image works by wrapping anything ie.<img> tag inside an <a> element with the data attribute data-lightbox="true"

Lightbox

HTML

<a href="assets/images/gallery-4.jpg" data-lightbox="data-lightbox" data-title="Image caption">
	<img src="assets/images/gallery-4.jpg"/>
</a>

CSS

<link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">

Javascript

<script src="assets/lib/lightbox2/dist/js/lightbox.js"></script>

Lightbox gallery

You can easily create a gallery of lightbox images by changing the data-lightbox="" attribute to the same name. For example data-lightbox="gallery-01"

HTML

<a href="assets/images/gallery-1.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="assets/images/thumbna-1.jpg"/>
</a>
	</div>
<a href="assets/images/gallery-2.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="assets/images/thumbna-2.jpg"/>
</a>
	</div>
<a href="assets/images/gallery-7.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="assets/images/thumbna-3.jpg"/>
</a>
	</div>
<a href="assets/images/gallery-10.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="assets/images/thumbna-4.jpg"/>
</a>
	</div>
<a href="assets/images/gallery-5.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="assets/images/thumbna-5.jpg"/>
</a>
	</div>
<a href="assets/images/gallery-6.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="assets/images/thumbna-6.jpg"/>
</a>

CSS

<link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">

Javascript

<script src="assets/lib/lightbox2/dist/js/lightbox.js"></script>