0

我一直在尝试对从我网站上的目录中提取的图像列表进行分页。我已经成功了，因为 div 中的“一、二、三..十六”文本分页。但是，所有图像（大约 50 张）都同时加载并跳过分页。

这是我的脚本的加载顺序还是我需要重新考虑如何从另一个目录中提取图像？

我正在使用这个分页插件 - http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

查询脚本

<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 = '<li><a class="fancybox" href="' 
                        + linkImage 
                        + '" data-fancybox-group="gallery"><img class=dropshadow src="' 
                        + thumbnailImage 
                        + '"></a></li>';
                    $(item).appendTo('.alt_content');
                }
            $('.fancybox').fancybox();
            }
        });
    });
    $('#paging_container3').pajinate({
                    items_per_page : 5,
                    item_container_id : '.alt_content',
                    nav_panel_id : '.alt_page_navigation'   
                })

</script>

DIV 我正在尝试分页

        <div id="paging_container3" class="container">
            <h2>Custom List Size</h2>
            <div class="alt_page_navigation"></div>
            <ul class="alt_content">
                 <li><p>One</p></li> 
                 <li><p>Two</p></li> 
                 <li><p>Three</p></li> 
                 <li><p>Four</p></li> 
                 <li><p>Five</p></li> 
                 <li><p>Six</p></li> 
                 <li><p>Seven</p></li> 
                 <li><p>Eight</p></li> 
                 <li><p>Nine</p></li> 
                 <li><p>Ten</p></li> 
                 <li><p>Eleven</p></li> 
                 <li><p>Twelve</p></li> 
                 <li><p>Thirteen</p></li> 
                 <li><p>Fourteen</p></li> 
                 <li><p>Fifteen</p></li> 
                 <li><p>Sixteen</p></li> 
            </ul>   
        </div>
4

1 回答 1

0

把你的 $('#paging_container3').pajinate(); 函数放在函数里面$(document).ready();。

#paging_container3我相信，pajinate 代码是在加载之前执行的。

于 2013-01-19T02:24:09.820 回答