0

さて、Google の Picasa 画像サービスから JSON 経由で画像を取得するスクリプトを作成しました。しかし、私が望むのは、ページごとに40枚の画像を表示することです。したがって、ユーザーが 40 を超える場合、たとえば 80 と言うと、ページネーションが添付され、次の 40 の画像が表示されます。jQueryでこれを行う方法がある場合、誰かが教えてくれますか? 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>");
                }
        });
        });
4

2 に答える 2

2

私はあなたのコードを使用しませんでしたが...あなたにアイデアを与えるために：

デモ: http://jsfiddle.net/uf3C2/5/

于 2011-08-06T05:37:52.123 に答える
0

まず最初に、 <li> 要素には一意のクラスがあり、これには 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 のようなものをチェックし、最大ページ番号を処理するために何かを追加したいと思うでしょうが、これは正しい方向に向かうはずだと思います。

于 2011-08-06T05:32:19.423 に答える