Сбой Infinitescroll в изотопе jQuery после выполнения функции поиска - PullRequest
Новая
       10

Сбой Infinitescroll в изотопе jQuery после выполнения функции поиска

1 голос
/ 15 ноября 2011

Я использую Изотоп и infinitescroll для загрузки изображений в галерею изображений. Я добавил функцию поиска, используя Quicksearch для фильтрации изображений и ретрансляции изотопа после выполнения поиска. Если я применяю бесконечную прокрутку перед поиском, она работает отлично, но если я сначала ищу, а затем пытаюсь применить бесконечную прокрутку, я получаю значок загрузки и т. Д., Но изображения не загружаются. Вот мой код: 

 // ======================= Isotope ===============================

 var $container = $('#container');

 $(function(){
  $container.imagesLoaded( function(){
    $(this).isotope({
      itemSelector : '.item',
      masonry : {
      columnWidth : 130

 }

    });
  });
 // ======================= search   ===============================       


$('input#discussion-search').quicksearch('#container .item', {
    'show': function() {
        $(this).addClass('quicksearch-match');
    },
    'hide': function() {
        $(this).removeClass('quicksearch-match');
    }
}).live("keyup", function(){
    setTimeout( function() {
        $container.isotope({ filter: '.quicksearch-match' });
    $container.isotope('reLayout'); 
    }, 100 );
});

});


// ======================= Infinite Scroll  ===============================

$container.infinitescroll({
navSelector  : 'a#nav',    // selector for the paged navigation 
nextSelector : 'a#nav',  // selector for the NEXT link (to page 2)
itemSelector : '.item',     // selector for all items you'll retrieve
loading: {
 finishedMsg: 'No more Images to load.',
img: 'res/icons/load.gif',
msgText: "<em>Loading Images...</em>"
},
behavior : 'twitter',
errorCallback: function() { 
  // fade out the error message after 2 seconds
  $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');   
}
},
// call Isotope as a callback
function( newElements ) {
  $container.isotope( 'insert', $( newElements ) );
}
);


$('a#Button').click(function(e){
// call this whenever you want to retrieve the next page of content
// likely this would go in a click handler of some sort
e.preventDefault();
    $container.infinitescroll('retrieve');
$('a#nav').hide();
return false;
 });

1 Ответ

1 голос
/ 16 ноября 2011

Кажется, я хотя бы временно нашел решение этой проблемы, которое работает, хотя, возможно, это не лучшее решение.Я добавил функцию обратного вызова в infinitescroll, чтобы изотопный фильтр «показывал все», а затем добавил код поиска, чтобы новые добавленные изображения были доступны для поиска 

 $container.infinitescroll({
 navSelector  : 'a#nav',    // selector for the paged navigation 
 nextSelector : 'a#nav',  // selector for the NEXT link (to page 2)
 itemSelector : '.item',     // selector for all items you'll retrieve
loading: {
 finishedMsg: 'No more Images to load.',
 img: 'res/icons/load.gif',
 msgText: "<em>Loading Images...</em>"
 },
 behavior : 'twitter',
 errorCallback: function() { 
  // fade out the error message after 2 seconds
  $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');   
 }
 },
 // call Isotope as a callback
 function( newElements ) {
  $container.isotope( 'insert', $( newElements ) );

 $container.isotope({ filter: '*' });  
 $('input#discussion-search').quicksearch('#container .item', {
    'show': function() {
        $(this).addClass('quicksearch-match');
    },
    'hide': function() {
        $(this).removeClass('quicksearch-match');
    }
 }).live('keyup',function(){
    setTimeout( function() {
        $container.isotope({ filter: '.quicksearch-match' });
$container.isotope();  

    }, 100 );
 });
...