Skip to content

Instantly share code, notes, and snippets.

@spyrosvl

spyrosvl/isotope infinite load.js

Last active March 20, 2018 10:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save spyrosvl/32b639861941c13d293171e04b574cd1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save spyrosvl/32b639861941c13d293171e04b574cd1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Spyros Vlachopoulos renamed this gist Mar 20, 2018. 1 changed file with 0 additions and 0 deletions.
    0 isotope infinite load → isotope infinite load.js
    View file
    File renamed without changes.
  2. Spyros Vlachopoulos created this gist Mar 20, 2018.
    97 changes: 97 additions & 0 deletions isotope infinite load
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    jQuery(document).ready(function() {
    jQuery(function(){
    var $grid = jQuery(".isotope");
    $grid.isotope();

    jQuery(window).trigger('resize');
    console.log('triggered resize');

    var count = 2;
    var total = 251;
    var top_of_element = jQuery("#ajax_loader").offset().top - 1500;
    var bottom_of_element = jQuery("#ajax_loader").offset().top + jQuery("#ajax_loader").outerHeight();
    var is_loading = 0;

    loadgriditems();
    // console.log('load grid items first time');
    jQuery(window).scroll( function() {
    if (is_loading == 0) {
    loadgriditems();
    }

    });

    function loadgriditems() {


    var bottom_of_screen = jQuery(window).scrollTop() + jQuery(window).height();
    var top_of_screen = jQuery(window).scrollTop();

    if((bottom_of_screen > top_of_element) && is_loading == 0){ // && (top_of_screen < bottom_of_element)

    // console.log('a');

    if (count > total){
    return false;
    }else{
    // console.log('b');
    is_loading = 1;
    console.log('grid is loading');
    jQuery('#ajax_loader').addClass('loading');

    var postdata = {
    'action': 'infinite_scroll',
    'page_no': count
    };

    jQuery.ajax({
    url: "http://fishingtackleretailer.com/wp-admin/admin-ajax.php",
    type:'POST',
    data: postdata,
    success: function(html){
    // console.log('c');
    var $items = jQuery(html);
    $grid.isotope( 'insert', $items ); // This will be the div where our content will be loaded


    $items.imagesLoaded().progress( function() {

    $grid.isotope('reLayout');
    $grid.isotope();
    console.log('triggered again on success');
    // console.log('added');
    $grid.isotope('reloadItems');
    // jQuery(".isotope").on( 'arrangeComplete', function( event, filteredItems ) {
    console.log('arrangeComplete');

    jQuery('#ajax_loader').removeClass('loading');
    top_of_element = jQuery("#ajax_loader").offset().top - 1500;
    bottom_of_element = jQuery("#ajax_loader").offset().top + jQuery("#ajax_loader").outerHeight();
    // });


    });

    console.log('count: '+ count);
    count++;

    jQuery(window).trigger('resize');

    setTimeout(function () {
    is_loading = 0;

    }, 500);



    }
    });

    }
    }

    }

    });

    });