2

isotopeユーザーがサイトの一番下に到達したときに、とinfinite-scrollスクリプトを組み合わせて、より多くのデータをロードします。

var $ = jQuery,
$container = $('#content.grided .wrap #gridcontainer');
if ( $container.length > 0 ) {
    $container.isotope({
        itemSelector : '.grid-item',
        masonry : {
            columnWidth : 240
        }
    });     
        //enable infinity scroll
    $container.infinitescroll({
            navSelector  : '#posts_navi',    // selector for the paged navigation 
            nextSelector : '#posts_navi a.previous_posts',  // selector for the NEXT link (to page 2)
            itemSelector : '.grid-item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'No more pages to load.',
                img: 'http://i.imgur.com/qkKy8.gif'
              }
            },
            // call Isotope as a callback
            function( newElements ) {
              $container.isotope( 'appended', $( newElements ) ); 
            }
          );    
    }

要素が dom に追加された後、いくつかの動作を追加するために、それらの要素に対してのみ jQuery スクリプトを実行したいと思います。

$('#gridcontainer .grid-item').each(function(){
    var $this = $(this),
    $overlay = $this.find('span.overlay');

    $this.hover(
        function(){
            $this.addClass('hovered');
            $overlay.stop().hide().fadeIn('100');
        },
        function(){
            $this.removeClass('hovered');
            $overlay.stop().show().fadeOut('100');
        }
    );
}

が使用されている最初のスクリプトのコールバック関数でそれを行う必要があることは知っていますisotope appendが、どのように正しく行う必要がありますか?

4

0 に答える 0