{Theme} comes with three types of Gallery:
Standard gallery (OWL gallery)
Standard Gallery
Example of HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="ct-js-owl ct-owl-item--smallPadding ct-js-popupGallery" data-items="6" data-animations="false" data-navigation="true" data-autoPlay="false" data-single="false" data-pagination="false"> <a href="assets/images/demo-content/gallery_bigimage3.jpg" class="ct-js-popup"> <div class="item ct-gallery-itemInner ct-u-displayBlock"> <img src="assets/images/demo-content/gallery-sec-image1.jpg"> </div> </a> <a href="assets/images/demo-content/gallery_bigimage9.jpg" class="ct-js-popup"> <div class="item ct-gallery-itemInner ct-u-displayBlock"> <img src="assets/images/demo-content/gallery-sec-image2.jpg"> </div> </a> <a href="assets/images/demo-content/gallery_bigimage11.jpg" class="ct-js-popup"> <div class="item ct-gallery-itemInner ct-u-displayBlock"> <img src="assets/images/demo-content/gallery-sec-image3.jpg"> </div> </a> </div> |
Masonry Gallery
Masonry gallery
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="ct-gallery" class="ct-gallery ct-gallery--col4 ct-js-popupGallery ct-gallery--smallPadding"> <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default hidden ct-gallery-item--normal facials"> <a href="assets/images/demo-content/gallery_bigimage25.jpg" class="ct-js-popup"> <div class="ct-gallery-itemInner"> <img src="assets/images/demo-content/masonry-image1.jpg" alt="Image"/> </div> </a> </div> <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default hidden ct-gallery-item--normal facials"> <a href="assets/images/demo-content/gallery_bigimage17.jpg" class="ct-js-popup"> <div class="ct-gallery-itemInner"> <img src="assets/images/demo-content/masonry-image4.jpg" alt="Image"/> </div> </a> </div> <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default hidden ct-gallery-item--normal facials"> <a href="assets/images/demo-content/gallery_bigimage20.jpg" class="ct-js-popup"> <div class="ct-gallery-itemInner"> <img src="assets/images/demo-content/masonry-image7.jpg" alt="Image"/> </div> </a> </div> </div> |
Gallery with filters
Gallery with filters
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="text-center"> <ul class="ct-gallery-filters list-unstyled list-inline"> <li><a data-filter="*" class="active">All</a></li> <li><a data-filter=".massages">Massages</a></li> <li><a data-filter=".facials">Facials</a></li> <li><a data-filter=".manicure">Manicure & Pedicure</a></li> </ul> <div class="clearfix"></div> </div> </div> <div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-popupGallery"> <div class="ct-gallery-item ct-gallery-item--masonry hidden facials"> <a href="assets/images/demo-content/gallery_bigimage1.jpg" class="ct-js-popup"> <div class="ct-gallery-itemInner"> <img src="assets/images/demo-content/gallery-image1.jpg" alt="Image"/> </div> </a> </div> <div class="ct-gallery-item ct-gallery-item--masonry hidden facials"> <a href="assets/images/demo-content/gallery_bigimage2.jpg" class="ct-js-popup"> <div class="ct-gallery-itemInner"> <img src="assets/images/demo-content/gallery-image2.jpg" alt="Image"/> </div> </a> </div> </div> |
Notice:
The following plugins are used in gallery:owl-carousel.js
imagesloaded.js
jquery.isotope.min.js