components

Lightbox

Lightbox Image

Lightboxes are integrated in Zazen. 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"

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>
AboutConnectTerms & Products

N

(212) 123-4567 666 Unnamed ave, california nirvana@abc.com

powered by Themewagon