— Filters
HTML markup
1 2 3 4 5 6 |
<ul class="ct-js-gallery-filters ct-gallery-filters"> <li><a href="#" data-filter="*" class="btn btn-motive-o btn-sm active">all</a></li> <li><a href="#" data-filter=".marketing" class="btn btn-motive-o btn-sm">marketing</a></li> <li><a href="#" data-filter=".training" class="btn btn-motive-o btn-sm">training</a></li> <li><a href="#" data-filter=".other" class="btn btn-motive-o btn-sm">other</a></li> </ul> |
Screenshot
— Item
HTML markup
1 2 3 4 5 6 7 8 |
<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> |
Screenshots
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/* Isotope */ (function ($) { "use strict"; jQuery(document).ready(function () { if ($().isotope && ($('.ct-js-gallery').length > 0)) { var $container = $('.ct-js-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: { } }; $container.imagesLoaded().progress(function (instance, image) { if (!image.isLoaded) { return; } var p = $(image.img).closest('.hidden'); p.removeClass('hidden'); $container.addClass('is-loaded'); // set up Isotope $container.each(function () { $(this).isotope(defaultOptions); $container.isotope('layout'); }); $container.isotope('layout'); }).always(function (instance) { if($().infinitescroll){ $container.infinitescroll({ loading: { finished: undefined, //img: finishedMsg: "<div class='gallerymessage'>No more images</div>", msg: null, msgText: "<div class='gallerymessage'>Loading</div>", selector: null, speed: 'fast', start: undefined }, navSelector: ".wp-pagenavi", nextSelector: ".nextpostslink", itemSelector: ".ct-gallery-item", extraScrollPx: 0, prefill: true }, function( newElements ) { $container.imagesLoaded(function(){ $(newElements).removeClass('hidden'); $container.isotope('appended', $(newElements)); }); }); } }); $('.ct-js-gallery-filters a').click(function () { $('.ct-js-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; }); } }); }(jQuery)); |
Isotope Documentation can be found here Files are bundled inside sella.min.js & style.css