0

好的，所以我有一个脚本可以通过 JSON 从 Google 的 Picasa 图像服务中获取图像。但我希望每页显示 40 张图片。因此，如果用户有超过 40 个，例如 80 个，则将附加一个分页，并显示单击下一个 40 个图像的图像。如果有办法用 jQuery 做到这一点，有人能告诉我怎么做吗？这是通过 JSON 从 Picasa 抓取图像的当前代码

$(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 属性会更合适。另外，我不太确定你为什么要给每张图片它自己的无序列表，只有一个列表项，但如果这真的是你想要的，那就发疯。

我以前从未处理过分页插件，但如果你想要每 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 回答