Create beautiful Portfolio with your works
Use one of two variations:
- ct-gallery
- ct-gallery–withSpacing
And choose number of columns:
- ct-gallery–col4
- ct-gallery–col3
- ct-gallery–col2
- ct-gallery–col5
Use the following 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div id="ct-gallery" class="ct-gallery ct-gallery--col4 ct-gallery--withSpacing is-loaded" style="position: relative; height: 772px;"> <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default ct-gallery-item--normal pistachio" style="position: absolute; left: 0px; top: 0px;"> <div class="ct-gallery-itemInner"> <div class="ct-galleryBox ct-galleryBox--type2 ct-galleryBox--green"> <div class="ct-galleryBox-image"> <a href="assets/images/demo-content/macaroon5.jpg" class="ct-js-magnificPopupImage"> <img src="assets/images/demo-content/thumbs/macaroon5.jpg" alt="Macaroon"> </a> </div> <div class="ct-galleryBox-overlay"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-galleryBox-icons"> <a href="#"> <div class="ct-galleryBox-overlayIcon"> <i class="fa fa-share-alt"></i> </div> </a> <a href="assets/images/demo-content/macaroon5.jpg" class="ct-js-magnificPopupImage"> <div class="ct-galleryBox-overlayIcon"> <i class="fa fa-search"></i> </div> </a> <a href="#"> <div class="ct-galleryBox-overlayIcon"> <i class="fa fa-heart"></i> 0 </div> </a> </div> </div> </div> </div> </div> <a href="#" class="ct-galleryBox-content"> <h4 class="ct-galleryBox-title text-uppercase">Macaroon Name Title</h4> <span class="ct-galleryBox-description"> A very delicious macaroon. </span> </a> </div> </div> </div> |
Remember to include isotope javascript:
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 32 33 34 35 36 37 |
if ($().isotope && ($('.ct-gallery').length > 0)) { var $container = $('.ct-gallery'), // object that will keep track of options isotopeOptions = {}, // defaults, used if not explicitly set in hash defaultOptions = { filter: '*', itemSelector: '.ct-gallery-item', // set columnWidth to a percentage of container width masonry: { } }; // set up Isotope $container.isotope(defaultOptions); $container.imagesLoaded().progress(function (instance, image) { if (!image.isLoaded) { return; } var p = $(image.img).closest('.hidden'); p.removeClass('hidden'); $container.addClass('is-loaded') $container.isotope('layout'); }) $('.ct-gallery-filters a').click(function () { $('.ct-gallery-filters .active').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); } |