0

サイトのディレクトリから取得した画像のリストをページ付けしようとしています。divのページネーションの「1、2、3..6」のテキストで成功しました。ただし、すべての画像 (約 50) がすべて同時に読み込まれ、ページネーションがスキップされます。

これはスクリプトの読み込み順序ですか? それとも、別のディレクトリから画像を取得する方法を再検討する必要がありますか?

このページネーションプラグインを使用しています - http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

JQuery スクリプト

<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 Imはページインしようとしています

        <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();関数を配置します。

pajinate コードは、#paging_container3ロードされる前に実行されていると思います。

于 2013-01-19T02:24:09.820 に答える