WOOKMARK AJAX를 통해 새 이미지를 가져올 때 필터 새로 고침

Question

WookMark을 사용하여 카테고리 필터와 ajax 무한 스크롤이있는 갤러리를 만듭니다. 모든 것이 잘 동작하는 것,하지만 새 항목이 아약스를 통해로드 할 때 그들은

당신은 그것을 밖으로 확인하실 수 있습니다 .. 필터에 추가되지 않습니다 내 JS 코드가 주어진다 here.

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

좋아, Wookmark 설명서의 솔루션을 추적했습니다 ..

아약스를 통해 새 항목을로드 할 때 필터 클래스를 업데이트해야합니다. 그래서 나는 단순히 내 아약스 성공에 wookmark.updateFilterClasses();을 추가했습니다. 다음은 작업 코드가 필요한 경우입니다.

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); 

});