画像数をカウントし、jQueryでページ番号を付けてください

Question

GoogleのPicasa画像サービスからJSON経由で画像を取り込むスクリプトがあります。しかし、私が望むのは、1ページに40枚の画像を表示することです。したがって、ユーザーが40を超える場合は80、たとえば80の場合はページネーションが適用され、クリックされた場合は次の40のイメージが表示されます。 jQueryでこれを行う方法があれば、どうすれば教えてくれるでしょうか？ここで最初の[OK]をので、最初のもののPicasa

からJSON経由

$(document).ready(function() { 
     $.getJSON("http://picasaweb.google.com/data/feed/base/user/--USERNAME--/?kind=photo&access=public&alt=json&callback=?", 

     function(data) { 
       var target = "#picasaweb-images"; // Where is it going? 
       for (i = 0; i <= 1000; i = i + 1) { // Loop through the 1000 most recent, [0-9] 
        var pic = data.feed.entry[i].media$group; 
        var liNumber = i + 1; // Add class to each LI (1-10) 
        var thumbSize = 2; // Size of thumbnail - 0=small 1=medium 2=large 
        $(target).append("<ul class='gallery'><li class='no-" + liNumber + "'><a title='" + pic.media$description.$t + "' rel='qpLightbox' href='getPhoto.jsp?o=" + pic.media$content[0].url + "' onClick=return false;><span></span><img src='getThumb.jsp?wl=4&w=170&h=120&url=" + pic.media$thumbnail[thumbSize].url + "' class='oi'/></a></li></ul>"); 
       } 
     }); 
     }); 

Answer 1

を画像を取得するため、現在のコードされた - あなたの<李>要素は、id属性が良くフィットだろうように私には思われる、ユニークなクラスがあります。また、なぜ私はそれが自分の順序付けられていないリストであり、1つのリスト項目だけで各画像を与えているのかは分かりませんが、それが本当に何のために起こっているのか分かりません。

は私が前に改ページプラグインを扱ったことがありませんが、あなたは新しい「ページ」ごとに40枚の画像をしたい場合、私はこのようなものだろう：

var curPage = 0; 
for(i=0; i < 1000; i++) { 
    if(i/40 + 1) > curPage) { 
    if(curPage === 0) { 
     $('#picasaweb-images').append('<div class="pic_page" id="pic_page_' + (++curPage) + '"></div>'); 
    } else { 
     $('#pic_page_' + curPage).after('<div class="pic_page" id="pic_page_' + (++curPage) + '"></div>'); 
    } 
    } 
    $('#pic_page_' + curPage).append(... picture stuff goes here ...); 
} 

スタイルあなたの「pic_page」クラスをあなたは好きですが、以下を追加してください：

.pic_page { 
    display: none; 
} 

#pic_page_1 { 
    display: block; 
} 

これは、最初のページ以外のすべてのページを非表示にします。

簡単なナビゲーションスキームのいくつかの種類を作成します。

<img src='arrow-left.png' id='prev_page_arrow' /> 
<!-- it's either a hidden input field, or a global JS var. Pick your poison --> 
<input type='hidden' id='current_page' value='1' /> 
<img src='arrow-right.png' id='next_page_arrow' /> 

をし、一緒にそれをすべて置くためのjQueryを使用します。

$('#prev_page_arrow').click(function() { 
    var curPage = parseInt($('#current_page').val(), 10); 
    $('#current_page').val(curPage-1); 
    $('#pic_page_' + curPage).fadeOut(400, function() { 
    $('#pic_page_' + (--curPage)).fadeIn(400); 
    }); 
}); 

明らかにあなたはページ0のようなものをチェックすると、追加します最大のページ番号を扱うものがありますが、これはあなたが正しい方向に向かうはずです。

Answer 2

私はあなたのコードを使用していないけど...あなたのアイデアを与えるために：

デモ：私は変数にJSONデータを格納し、機能とそれらをして見せることをお勧めhttp://jsfiddle.net/uf3C2/5/