It is a really nice way to present images on your website
HTML marker (example)
1 2 3 4 5 6 7 8 9 10 11 |
<div id="ct-gallery" class="ct-gallery ct-js-gallery ct-gallery--col5 lightGallery"><a href="assets/images/demo-content/portfolio-big-image.jpg"> <article class="ct-gallery-item marketing"> <figure><img src="assets/images/demo-content/portfolio-thumbnail.jpg" alt=""/> <figcaption> <div class="ct-gallery-item-text"> <div class="inner"><span class="ct-gallery-item-title ct-section-header-decoration-center">motivational campaign</span><span class="ct-gallery-item-tags">marketing / other</span></div> </div> </figcaption> </figure> </article></a> </div> |
Screenshot
JavaScript
1 2 3 4 5 |
$('.lightGallery').each(function() { $(this).lightGallery({ thumbnail:true }); }); |
Lightgallery Documentation can be found here. Files are bundled inside sella.min.js & style.css