Question

Ok, so I have a script to fetched images from Google’s Picasa image service via JSON. But what I wish is to display say 40 images per page. So if user has more then 40 lets say 80 for example then a pagination would be attached and ones clicked the next 40 images would be shown. If there is a way to do this with jQuery could some one tell me how? Here is the current code for grabbing images via JSON from 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>");
                }
        });
        });

Answer 1

Ok so first things first – your <li> elements will have unique classes, which to me seems like the id attribute would be a better fit. Also, I’m not really sure why you’re giving each image it’s own unordered list, with only one list item, but if that’s really what you’re going for, go nuts.

I’ve never dealt with a pagination plug-in before, but if you want a new ‘page’ every 40 images, I would do something like this:

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 ...);
}

Style your ‘pic_page’ class however you like, and make sure to add the following:

.pic_page {
  display: none;
}

#pic_page_1 {
  display: block;
}

This will hide all pages of pictures except the first page, to begin with.

Create some kind of simple navigation scheme:

<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' />

And use jQuery to put it all together:

$('#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);
  });
});

Obviously you’ll want to check for things like page 0, and add something to deal with a max page number, but I think this should get you headed in the right direction.