— Filters
HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="ct-isotope-filtering"> <button class="btn btn-gray-o is-active" data-filter="*">Show All </button> <button class="btn btn-gray-o" data-filter=".august">August, 2015 </button> <button class="btn btn-gray-o" data-filter=".july">July, 2015 </button> <button class="btn btn-gray-o" data-filter=".june">June, 2015 </button> <button class="btn btn-gray-o" data-filter=".may">May, 2015 </button> </div> |
Screenshot
— Item
HTML markup
1 2 3 4 5 6 7 8 |
<figure class="ct-isotope-item august"> <div class="ct-isotope-item__media"><img src="assets/images/demo-content/gallery-01.jpg" alt="Gallery Item"/> <div class="ct-isotope-item__hover"> <div class="ct-isotope-item__inner"><a href="assets/images/demo-content/gallery-01.jpg" class="btn btn-default-o--type2 btn-sm mfp-image">View Image</a><a href="#" class="btn btn-default-o--type2 btn-sm">Read More</a> </div> </div> </div> </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 |
/* Isotope */ (isotope_gallery = function() { var isotope_filter, isotope_load; if ($().isotope) { isotope_gallery = $('.ct-isotope-gallery'); isotope_filter = $('.ct-isotope-filtering button'); isotope_load = $('#load-more'); isotope_gallery.isotope({ itemSelector: '.ct-isotope-item', percentPosition: true, masonry: { columnWidth: '.isotope-grid-sizer' } }); isotope_filter.on('click', function() { var filter_value, that; that = $(this); isotope_filter.removeClass('is-active'); that.addClass('is-active'); filter_value = that.attr('data-filter'); return isotope_gallery.isotope({ filter: filter_value }); }); return isotope_load.on('click', function() { var load_name, load_page, response, that; that = $(this); load_name = that.attr('data-load-name'); load_page = parseInt(that.attr('data-load-page')); response = ''; $.ajax({ type: 'GET', url: load_name + load_page + '.html', async: false, success: function(value) { response = value; return isotope_gallery.isotope('insert', $(response)); }, complete: function() { magnific_popup(); return $.ajax({ type: 'GET', url: load_name + (load_page + 1) + '.html', async: false, error: function() { return that.remove(); } }); } }); return that.attr('data-load-page', load_page + 1); }); } })(); |
Isotope Documentation can be found here Files are bundled inside confetti.min.js & style.css