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 |
<div class="ct-isotope-container ct-u-paddingBoth50"> <div class="grid ct-isotope-gallery" style="position: relative; height: 1132px;"> <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"> <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70"> <div class="ct-testimonials-box"> <div class="ct-testimonials-text"> <h3>Julie D. <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3> <h6>Feb 21, 2015</h6> <h5>Cras pharetra nunc ac magna pulvinar, id porttitor leo suscipit. Gravida urna sit amet accumsan imperdiet. Aenean facilisis ut tellus ut viverra. Vestibulum magna magna, ultricies condimentum non!</h5> </div> </div> </div> </div> </div> </figure> </div> <div class="text-center ct-u-paddingBoth30"> <button id="load-more" class="btn btn-black" data-load-name="review" data-load-page="1">Load more reviews</button> </div> </div> |
and other “reviews” will be loaded from other html file. Example full html file named review1.html [important]:
|
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 |
<figure class="grid-item ct-isotope-item"> <div class="ct-isotope-item-inner"> <div class="ct-isotope-item__media"> <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70"> <div class="ct-testimonials-box"> <div class="ct-testimonials-text"> <h3>Gerald Schwartz <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3> <h6>Jan 31, 2015</h6> <h5>Nulla porta auctor nunc non lacinia. Aliquam tempus mauris at sem mattis, nec varius neque scelerisque. Integer ornare, massa vulputate mattis dapibus, erat metus suscipit augue, placerat fringilla arcu elit at est.</h5> </div> </div> </div> </div> </div> </figure> <figure class="grid-item ct-isotope-item"> <div class="ct-isotope-item-inner"> <div class="ct-isotope-item__media"> <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70" > <div class="ct-testimonials-box"> <div class="ct-testimonials-text"> <h3>Edward C. <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3> <h6>Feb 7, 2015</h6> <h5>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</h5> </div> </div> </div> </div> </div> </figure> <figure class="grid-item ct-isotope-item"> <div class="ct-isotope-item-inner"> <div class="ct-isotope-item__media"> <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70"> <div class="ct-testimonials-box"> <div class="ct-testimonials-text"> <h3>Barry Balderston <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3> <h6>Jan 9, 2015</h6> <h5>Ut ac nibh quis mauris imperdiet hendrerit. Nunc quis risus rutrum, blandit ex at, vulputate nunc. Nunc maximus feugiat porttitor. </h5> </div> </div> </div> </div> </div> </figure> |
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(); }); |
Screenshot
Reviews with infinite scroll and isotope