To create a isotope item please used the HTML markup from below
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<figure class="grid-sizer grid-item ct-isotope-item" style="position: absolute; left: 0%; top: 0px;"> <div class="ct-isotope-item-inner"> <div class="ct-isotope-item__media"> <a href="preventive_maintenance.html"><img src="assets/images/gallery-01.jpg" alt="Gallery Item"></a> <div class="ct-isotope-item__inner"> <a href="preventive_maintenance.html"><h3 class="ct-services-header"> Preventive maintenance </h3></a> </div> </div> </div> </figure> |
Screenshot
Isotope item
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 |
$(window).on('load', function() { /* Isotope */ var 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: '.grid-sizer' } }); isotope_filter.on(clickEvent, 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(clickEvent, 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() { return $.ajax({ type: 'GET', url: load_name + (load_page + 1) + '.html', async: false, error: function() { return that.parent().remove(); } }); } }); return that.attr('data-load-page', load_page + 1); }); } }; isotope_gallery(); }); |
Isotope Documentation can be found here Files are bundled inside main.js & style.css