javascript - JQueryの使用アイテムを非表示のdivから別の無限スクロールにプル

Question

私のサイトには、ユーザーがサーバー上のディレクトリに写真をアップロードできるページがあります。

次に、これらの写真（100x100のサムネイル）がそのディレクトリから取得され、aa<DIV ID=Content>に配置され、そのディレクトリのすべての写真が表示されます。

ここのコーダー：

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
    $.ajax({
        url: "user-uploads-thumbnails",
        success: function(data){
            var imageNames = [];
            $(data).find("a:contains(.jpg)").each(function(){
                // store each image name into array
                imageNames.push($(this).attr("href"));
               });

            var sortedImageNames = imageNames.sort();

            for(var i = sortedImageNames.length; i-- > 0;) {
                    var linkImage = 'user-uploads/' + sortedImageNames[i];
                    var thumbnailImage = 'user-uploads-thumbnails/' + sortedImageNames[i];
                    var item = '<div class="item"> <li> <a class="fancybox" href="' 
                        + linkImage 
                        + '" data-fancybox-group="gallery"><img class=dropshadow src="' 
                        + thumbnailImage 
                        + '"></a></li></div>';
                    $(item).appendTo('#content');
                }
            $('.fancybox').fancybox();
            }
        });
    });
</script>

ただし、写真の壁が大きくなりすぎているため、一度に30枚の画像を取得する無限スクロール機能を実装する必要があります。

私の調査によると、を非表示にしてから<DIV ID=Content>、一度に30枚の画像を新しい画像にプルする必要があるよう<DIV ID=load30>です。ユーザーがページの下から200ピクセルに達したら、さらに30をロードし、非表示からプルする画像がなくなるまでこれを続けたいと思います。<DIV ID=Content>

これは、から画像をプルするために私が思いついたコードです<DIV ID=Content> to <Div ID=Load30>。load30 divが設定されていないので、これを使用しています。

私の間違いはどこにありますか？

正しく動作させられないようです。

<script>

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

    {
        bottomPixels:200,
        callback: function (p) 
            {

            var load30images = $('#content li:lt(30)');
            $('#load30').append(load30images);      
            }   
    }

    );

});
</script>