Lightbox

All modular elements can be readily used and customized in every layout across pages.

Lightbox Image

Lightboxes are integrated in Posh. 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="origin/images/gallery/original-01.jpg" data-lightbox="data-lightbox" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-01.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="origin/images/gallery/original-01.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-01.jpg"/>
</a>
	</div>
<a href="origin/images/gallery/original-02.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-02.jpg"/>
</a>
	</div>
<a href="origin/images/gallery/original-03.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-03.jpg"/>
</a>
	</div>
<a href="origin/images/gallery/original-04.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-04.jpg"/>
</a>
	</div>
<a href="origin/images/gallery/original-05.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-05.jpg"/>
</a>
	</div>
<a href="origin/images/gallery/original-06.jpg" data-lightbox="gallery-01" data-title="Image caption">
	<img src="origin/images/thumbnails/thumb-06.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>
Jump into