WOOKMARK Refresh Filter, wenn neue Bilder über AJAX geholt werden

Question

Ich benutze WookMark, um eine Galerie mit Kategorien Filter und AJAX Infinite Scroll zu erstellen. Alles scheint gut zu funktionieren, aber wenn neue Elemente über Ajax geladen werden, werden sie nicht auf Filter hinzugefügt ..

Sie können es aus here.

Mein JS-Code wird

gegeben

jQuery(document).ready(function($) { 

    // GET THE WINDOW WIDTH 
    function getWindowWidth() { 
     return Math.max(document.documentElement.clientWidth, window.innerWidth || 0) 
    } 

    // Initialize lightbox 
    $('#container').magnificPopup({ 
     delegate: 'li:not(.inactive) a', 
     type: 'image', 
     gallery: { 
     enabled: true 
     } 
    }); 

    // Instantiate wookmark after all images have been loaded 
    var wookmark, 
     container = '#container', 
     $container = $(container), 
     $window = $(window), 
     $document = $(document); 

    // init wookmark 
    imagesLoaded('#container', function() { 
     wookmark = new Wookmark('#container', { 
     itemWidth: 300, // Optional min width of a grid item 
     outerOffset: 0, // Optional the distance from grid to parent 
     flexibleWidth: function() { 
      // Return a maximum width depending on the viewport 
      return getWindowWidth() < 1024 ? '100%' : '50%'; 
     } 
     }); 
    }); 

    // INFINITE SCROLL 
    // AJAX LOAD MORE 
    $('#main').append('<span class="load-more"></span>'); 
    var button = $('#main .load-more'); 
    var page = 2; 
    var loading = false; 
    var scrollHandling = { 
     allow: true, 
     reallow: function() { 
      scrollHandling.allow = true; 
     }, 
     delay: 400 //(milliseconds) adjust to the highest acceptable value 
    }; 

    // Load more items on scroll 
    $(window).scroll(function(){ 
     if(! loading && scrollHandling.allow) { 

     scrollHandling.allow = false; 
     setTimeout(scrollHandling.reallow, scrollHandling.delay); 
     var offset = $(button).offset().top - $(window).scrollTop(); 

     if(2000 > offset) { 
      console.log('Added more items'); 
      // Get Next Page Posts AJAX 
      loading = true; 
      var data = { 
      action: 'be_ajax_load_more', 
      nonce: beloadmore.nonce, 
      page: page, 
      query: beloadmore.query, 
      }; 
      $.post(beloadmore.url, data, function(res) { 
      if(res.success) { 
       // Get the first then items from the grid, clone them, and add them to the bottom of the grid 
       var $items = $(res.data, $container); 
       $container.append($items); 

       wookmark.initItems(); 
       wookmark.layout(true, function() { 
       // Fade in items after layout 
       setTimeout(function() { 
        $items.css('opacity', 1); 
       }, 300); 
       }); 

       $('#main').append(button); 
       page = page + 1; 
       loading = false; 
      } else { 
       // console.log(res); 
      } 
      }).fail(function(xhr, textStatus, e) { 
      // console.log(xhr.responseText); 
      }); 
     } 
     } 
    }); 

    // Setup filter buttons when jQuery is available 
    var $filters = $('#filters li'); 

    /** 
    * When a filter is clicked, toggle it's active state and refresh. 
    */ 
    var onClickFilter = function(event) { 
     updateFilterClasses(); 
     var $item = $(event.currentTarget), 
      itemActive = $item.hasClass('active'); 

     if (!itemActive) { 
     $filters.removeClass('active'); 
     itemActive = true; 
     } else { 
     itemActive = false; 
     } 
     $item.toggleClass('active'); 

     // Filter by the currently selected filter 
     wookmark.filter(itemActive ? [$item.data('filter')] : []); 
    } 

    // Capture filter click events. 
    $('#filters').on('click.wookmark-filter', 'li', onClickFilter); 

}); 

Answer 1

Okay, ich habe die Lösung in der Wookmark-Dokumentation verfolgt.

Ich muss die Filterklassen aktualisieren, wenn ich neue Objekte über Ajax lade. Also habe ich einfach wookmark.updateFilterClasses(); auf meinem Ajax-Erfolg hinzugefügt. Unten ist der Arbeitscode, wenn jemand es braucht.

jQuery(document).ready(function($) { 

    function getWindowWidth() { 
     return Math.max(document.documentElement.clientWidth, window.innerWidth || 0) 
    } 

    // Init lightbox 
    $('#container').magnificPopup({ 
     delegate: 'li:not(.inactive) a', 
     type: 'image', 
     gallery: { 
     enabled: true 
     } 
    }); 

    // Instantiate wookmark after all images have been loaded 
    var wookmark, 
     container = '#container', 
     $container = $(container), 
     $window = $(window), 
     $document = $(document); 

    imagesLoaded('#container', function() { 
     wookmark = new Wookmark('#container', { 
     itemWidth: 300, // Optional min width of a grid item 
     outerOffset: 0, // Optional the distance from grid to parent 
     flexibleWidth: function() { 
      // Return a maximum width depending on the viewport 
      return getWindowWidth() < 1024 ? '100%' : '50%'; 
     } 
     }); 
    }); 

    $('#main').append('<span class="load-more"></span>'); 
    var button = $('#main .load-more'); 
    var page = 2; 
    var loading = false; 
    var scrollHandling = { 
     allow: true, 
     reallow: function() { 
      scrollHandling.allow = true; 
     }, 
     delay: 400 //(milliseconds) adjust to the highest acceptable value 
    }; 

    $(window).scroll(function(){ 
     if(! loading && scrollHandling.allow) { 

     scrollHandling.allow = false; 
     setTimeout(scrollHandling.reallow, scrollHandling.delay); 
     var offset = $(button).offset().top - $(window).scrollTop(); 

     if(2000 > offset) { 
      console.log('Added more items'); 
      // Get Next Page Posts AJAX 
      loading = true; 
      var data = { 
      // Function which grabs next 10 posts available 
      action: 'be_ajax_load_more', 
      nonce: beloadmore.nonce, 
      page: page, 
      query: beloadmore.query, 
      }; 
      $.post(beloadmore.url, data, function(res) { 
      if(res.success) { 
       // Get the first then items from the grid, clone them, and add them to the bottom of the grid 
       var $items = $(res.data, $container); 
       $container.append($items); 

       wookmark.initItems(); 
       wookmark.updateFilterClasses(); 
       wookmark.layout(true, function() { 
       // Fade in items after layout 
       setTimeout(function() { 
        $items.css('opacity', 1); 
       }, 300); 
       }); 

       $('#main').append(button); 
       page = page + 1; 
       loading = false; 
      } else { 
       // console.log(res); 
      } 
      }).fail(function(xhr, textStatus, e) { 
      // console.log(xhr.responseText); 
      }); 
     } 
     } 
    }); 

    // Setup filter buttons when jQuery is available 
    var $filters = $('#filters li'); 

    /** 
    * When a filter is clicked, toggle it's active state and refresh. 
    */ 
    var onClickFilter = function(event) { 
     var $item = $(event.currentTarget), 
      itemActive = $item.hasClass('active'); 
     console.log(itemActive); 

     if (!itemActive) { 
     $filters.removeClass('active'); 
     itemActive = true; 
     } else { 
     itemActive = false; 
     } 
     $item.toggleClass('active'); 

     // Filter by the currently selected filter 
     wookmark.filter(itemActive ? [$item.data('filter')] : []); 
    } 

    // Capture filter click events. 
    $('#filters').on('click.wookmrk-filter', 'li', onClickFilter); 

});