Inside your Isotope Gallery you can put as many gallery items as you want. Just use the following HTML markup for every item:
|
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 |
<!--GALLERY ITEM--> <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/cleaning/TwoWomenCleaningCarpetGV1.png" class="ct-js-magnificPopupImage"> <img src="../assets/images/cleaning/TwoWomenCleaningCarpetGV1.png" 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/cleaning/TwoWomenCleaningCarpetGV1.png" class="ct-js-magnificPopupImage"> <div class="ct-galleryBox-overlayIcon"> <span>Quick View</span> </div> </a> </div> </div> </div> </div> </div> </div> </div> |
Gallery Item
You can select between several different options to change your gallery items appearance, just use combination of the following variations:
- .ct-gallery-item,
- .ct-gallery-item–masonry,
- .ct-gallery-item–default hidden,
- .ct-gallery-item–normal,
- .controls,
- .ct-gallery-itemInner,
- .ct-galleryBox,
- .ct-galleryBox–type2,
- .ct-galleryBox–primary,
- .ct-galleryBox-image,
- .ct-galleryBox-overlay,
- .ct-galleryBox-icons,
- .ct-galleryBox-overlayIcon
Remember to attach the following JS files:
|
1 2 |
<script src="../assets/js/magnific-popup/jquery.magnific-popup.min.js"></script> <script src="../assets/js/magnific-popup/init.js"></script> |