Lightbox

Lightbox Image

Lightboxes are integrated into Slick. It allows you to display a thumbnail and when clicked, the original image will pop 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>