Question

好的，我有一个脚本可以通过JSON从Google的Picasa图像服务中获取图像。但我希望显示每页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>");
                }
        });
        });

Answer 1

我没有使用你的代码，但......给你一个想法：

演示：http://jsfiddle.net/uf3C2/5/

Answer 2

首先确定首先 - 你的＆lt; li＆gt;元素将具有唯一的类，对我来说似乎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页之类的内容，并添加一些内容来处理最大页码，但我认为这应该让你朝着正确的方向前进。

计算图像数量并通过jQuery添加分页

2 个答案: