$25
Jquery Flickr API + Pagination

Hello everyone.

I created this script with jquery flickr plugin to get images from a set of a specific user.

To switch between sets I populated a selectbox getting the id of all available sets on flickr.

To switch the sets, I use the selectbox, so the script loads photos of the selected set.

What I'd like to do now, is to integrate a pagination system.

This is my actual code http://pastebin.me/0de6d5d532e61f5afcf87089ada08ee8

I'd like to split the results of a single set setting how many images to display and then I'd like to have the classic links "previous" and "next" to navigate items without refreshing the page, as it happens for example in this script demo pagination

EDIT

Ok, I'm available to increase the price of 15$ for a complete integration with jquery pagination plugin ( I like it becouse display also the number of page).

For a demo download here

pmalerba | 04/13/10 at 11:24am | Edit

api flickr, javascript, jquery

(2) Possible Answers Submitted...

Last edited:
04/14/10
6:16am
erez213 says:
You should do the pagination with PHP script,if you want tutorial you can google it("pagination in php"),and if you don't know how to do it,I'll make the script for you
- 04/13/10 11:48am
  
  pmalerba says:
  Hi erez213, thanks for your answers. I googled a lot of pagination scripts and I known there is also a jquery plugin for that http://plugins.jquery.com/project/pagination
  I'd like something without refreshing the page as indicated in the example demo script.
- 04/13/10 12:31pm
  
  erez213 says:
  Maybe you can split the images to divs and then to create links ,and when someone click on one of the links,the script will make one of the divs to show and the div that was showed before the user clicked will dissapear
- 04/13/10 12:47pm
  
  pmalerba says:
  Mmm I didn't understand very well. Could you provide a working version?
- 04/13/10 12:55pm
  
  erez213 says:
  Working on it.
  but here is example:
```
<div id="page-1">pics pics pics</div>

<div id="page-2" style="display:none;">pics pics pics</div>

<div id="page-3" style="display:none;">pics pics pics</div>

<a href="#" onclick="document....getelementbyid("page-1").style.dispaly = "block"">1</a>
```
  I know there is some syntax error,but this is just to show you the main idea,if you still don't understand wait to my code
- 04/13/10 1:32pm
  
  erez213 says:
  http://wordpress.pastebin.com/Bn3JEMYv
  this is the full code,there is a div with the links,you can change the design however you want,and there is two function at the header which doing the pagination
  enjoy
- 04/13/10 3:51pm
  
  pmalerba says:
  Tnx for your solution!
  
  I'm sorry. :(
  According with FAQ 5.
  http://javascriptquestions.com/page/static/name/About
  Ultimately, whoever answers accurately first should be awarded a prize.
  
  Also if your solution it's good I have to award the user that answer first.
  
  Tnx,
  Pietro
- 04/13/10 4:10pm
  
  erez213 says:
  And I answered first,I gave you full working script,all you have to do is to copy the code to your html file and everything will work for you
- 04/13/10 4:11pm
  
  erez213 says:
  BTW you can split the money if you want
- 04/13/10 4:27pm
  
  pmalerba says:
  And I answered first,I gave you full working script,all you have to do is to copy the code to your html file and everything will work for you
  
  No erez213,
  
  04/13/10 1:32pm
  erez213 says:
  
  04/13/10 1:18pm
  Jarret Minkler says:
  
  As you can see Jarret Minkler answered first.
  
  BTW I asked to Jarret some clue to echo all available pagse as indicated on this image
  
  See this image
  (Without css, just the display of pages)
  
  With this clarification your answer could be the best one.
- 04/13/10 5:26pm
  
  erez213 says:
  http://wordpress.pastebin.com/Kxcgv55U
  Enjoy,I add pages num
- 04/14/10 3:26am
  
  pmalerba says:
  Hi Erez213,
  
  have you tested your code? http://pastebin.me/db8d97f7df9c21abc834f6d9fdd79807
  I have just tried it and seems to be not working.
- 04/14/10 3:37am
  
  erez213 says:
  yes i did. i will check it again
- 04/14/10 3:55am
  
  erez213 says:
  Sorry man,I can't check the code from where I am,can you tell me exactly what the problem is?
- 04/14/10 4:20am
  
  pmalerba says:
  Hi Eric, I don't know what's wrong. It just don't work.
  
  Here you can see your code doesn't display nothing.
  
  http://pastebin.me/db8d97f7df9c21abc834f6d9fdd79807
  
  On your top right there is a button "Edit Code" to edit your code and test it live.
- 04/14/10 5:04am
  
  erez213 says:
  What browser are you using?
  and do you see the page's links or you don't see anything at all?
  if you are using explorer,can you click on the status bar where the browser tells you there is error and copy the error and paste it here
  I'll be in about 5 hours and until then there is nothing i can do
- 04/14/10 6:01am
  
  pmalerba says:
  Ok, I found the error with firebug. API key error: jsonp1271238965232({"stat":"fail", "code":100, "message":"Invalid API Key (Key not found)"})
  
  It's very strange because until yesterday it worked. Ok fine!
  
  You're response it's fully satisfactory!
Last edited:
04/14/10
6:16am
Jarret Minkler says:
so ...

This is what populates the images

$("#flickrTest").flickr({
api_key: 'be482b6789498541c8e1aa18e832dfc3'
, type: 'photoset'
, photoset_id: selectedID
});

which is a call to the flicker plugin ...

If you want to do it all in jquery perhaps you could NOT display this div .. then loop through all the elements inside that div to do the pages .. for example

pseudocode:
function showImages($start, $end){

$("#flickrTest img").each(function(i){
if($start++ >= $end){
$('#container').append(i);
}
});
}
- 04/13/10 12:41pm
  
  pmalerba says:
  This is what populates the images
  
  $("#flickrTest").flickr({
  api_key: 'be482b6789498541c8e1aa18e832dfc3'
  , type: 'photoset'
  , photoset_id: selectedID
  });
  
  Yes, around line 33 there is the call to flickr pluglin with the selectedID passed by the selectbox.
  
  Instead around line 65 there is another call always to flickr plugin with id[0] to display the first default selected album on page loading.
  
  If you want to do it all in jquery perhaps you could NOT display this div .. then loop through all the elements inside that div to do the pages .. for example
  
  pseudocode:
  function showImages($start, $end){
  
  $("#flickrTest img").each(function(i){
  if($start++ >= $end){
  $('#container').append(i);
  }
  });
  }
  
  Maybe it's a good idea. Could you provide a working example? I'm a jquery newbe :)
  
  Tnx
- 04/13/10 12:48pm
  
  Jarret Minkler says:
  Sure
- 04/13/10 1:18pm
  
  Jarret Minkler says:
  Actually ... if this is the same flickr plugin hosted on google .. there are options to specify for pages
  
  per_page: null, // default: 100, max: 500
  
  page: null, // default: 1
  
  So where you have
```
$("#flickrTest").flickr({

api_key: 'be482b6789498541c8e1aa18e832dfc3'

, type: 'photoset'

, photoset_id: selectedID

});
```
  you can add ..
```
$("#flickrTest").flickr({

api_key: 'be482b6789498541c8e1aa18e832dfc3'

, type: 'photoset'

, photoset_id: selectedID,

per_page: 10

page: $page,     	// send page no# as the caller

});
```
  So, you can add a global variable
  
  var $current_page = 0;
  
  near the top of your script block,
  
  then create your next and previous links ...
  
  <a href="javascript:showGallery(--$current_page)">Previous</a>
  <a href="javascript:showGallery(++$current_page)">Next</a>
  
  then modify your current showGallery to
  
  function showGallery($page){
  
  if(!$page) {$page = 0;}
  
  then fix the flickr call as above ..
  
  $("#flickrTest").flickr({
  api_key: 'be482b6789498541c8e1aa18e832dfc3'
  , type: 'photoset'
  , photoset_id: selectedID,
  per_page: 10
  page: $page, // send page no# as the caller
  });
  
  See http://pastebin.me/b415c1dbc703929f365e48c14f33207a
  
  This should be a great start
- 04/13/10 3:46pm
  
  pmalerba says:
  Tnx for your solution!
  
  According with FAQ 5.
  http://javascriptquestions.com/page/static/name/About
  Ultimately, whoever answers accurately first should be awarded a prize.
  You are the winner becouse you answered first.
  
  Just one question: on your code I added around line 13
```
//html to div #paginazione the page number

$("#paginazione").html('Pagina '+ $page + '');
```
  and around line 89
```


<div id="paginazione"></div>
```
  So I can add the current page number. Any clue to have all available pages numbers?
  Something like attached image (doesn't matter css, just the number of available pages).
  
  Tnx,
  Pietro
  
  Attached Image
- 04/13/10 5:34pm
  
  Jarret Minkler says:
  in the code ...
  
  // PAGING NOTES: jQuery Flickr plug-in does not provide paging functionality, but does provide hooks for a custom paging routine
  // within the <ul> created by the plug-in, there are two hidden <input> tags,
  // input:eq(0): current page, input:eq(1): total number of pages, input:eq(2): images per page, input:eq(3): total number of images
  
  So, after the div is updated, you could ...
  
  psuedocode:
  
  function total(){
  $count = 0;
  $('flickerTest div ul').each(function(li){
  if($count++ == 1){
  return li.value;
  }
  });
  }
  
  A little lame but may work