1

画像ギャラリーに画像をロードするために、Isotopeと無限スクロールを使用しています。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;
 });
4

1 に答える 1

1

最善の解決策ではないかもしれませんが、少なくとも一時的にこの問題の解決策を見つけたようです。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 );
 });
于 2011-11-15T23:56:36.030 に答える