Gallery
Create beautiful gallery of your works. Filter your pictures by Categories with Isotope.
If you want to use isotope filters – please add the following markup above your gallery container:
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-gallery-filters-container"> <ul class="ct-gallery-filters list-unstyled"> <li><a data-filter="*" class="">All</a></li> <li><a data-filter=".furnaces" class="">Furnaces</a></li> <li><a data-filter=".boilers" class="">Boilers</a></li> <li><a data-filter=".fireplaces" class="">Fireplaces</a></li> <li><a data-filter=".controls" class="">Controls</a></li> </ul> </div> |
Than create your gallery:
|
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 27 28 29 30 31 |
<div id="ct-gallery" class="ct-gallery ct-gallery--col4 ct-gallery--withSpacing"> <!-- gallery item starts here --> <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default hidden ct-gallery-item--normal controls"> <div class="ct-gallery-itemInner"> <div class="ct-galleryBox ct-galleryBox--type2 ct-galleryBox--primary"> <div class="ct-galleryBox-image"> <a href="./assets/images/demo-content/construction/gallery-v1-1row1-large.jpg" class="ct-js-magnificPopupImage"> <img src="./assets/images/demo-content/construction/gallery-v1-1row1.jpg" alt="Zappy"> </a> </div> <div class="ct-galleryBox-overlay"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-galleryBox-icons"> <a href="./assets/images/demo-content/construction/gallery-v1-1row1-large.jpg" class="ct-js-magnificPopupImage"> <div class="ct-galleryBox-overlayIcon"> <span>Quick View</span> </div> </a> </div> </div> </div> </div> </div> </div> <!-- gallery item ends here --> </div> |
If you want to assign portfolio item to a particular filter add the corresponding class to portfolio item.
Isotope filter class
You can use several variations for main gallery container:
- .ct-gallery,
- .ct-gallery–col4,
- .ct-gallery–withSpacing,
- .ct-gallery–col7 – enable to display 7 gallery items in a row.
Remember to attach the following JS files to your gallery page:
|
1 2 3 |
<script src="../assets/js/portfolio/jquery.isotope.min.js"></script> <script src="../assets/js/portfolio/imagesloaded.js"></script> <script src="../assets/js/portfolio/init.js"></script> |