1

我的网站上有一个页面，允许用户将照片上传到我服务器上的目录。

然后从该目录中提取这些照片（100x100 缩略图）并放置在<DIV ID=Content>显示该目录中所有照片的 aa 中。

编码器在这里：

<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>
4

0 回答 0