Ask your JavaScript questions! Pay money and get answers fast! (more info)

Jquery Flickr API + Pagination JavaScript

  • SOLVED

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.

<strong>What I'd like to do now, is to integrate a pagination system.
</strong>
This is my actual code [[LINK href="http://pastebin.me/0de6d5d532e61f5afcf87089ada08ee8"]]http://pastebin.me/0de6d5d532e61f5afcf87089ada08ee8[[/LINK]]

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 [[LINK href="http://elccore.s3.amazonaws.com/productdemos/deeplink/index.html"]]demo pagination [[/LINK]]

<strong><em>EDIT</em></strong>

<strong>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).

[[LINK href="http://www.hostingcubo.com/JS_Pagination-script.zip"]]For a demo download here[[/LINK]]</strong>

Answers (2)

2010-04-13

erez213 answers:

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


pmalerba comments:

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.


erez213 comments:

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


pmalerba comments:

Mmm I didn't understand very well. Could you provide a working version?


erez213 comments:

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


erez213 comments:

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


pmalerba comments:

Tnx for your solution!

I'm sorry. :(
According with FAQ 5.
http://javascriptquestions.com/page/static/name/About
<em>Ultimately, whoever answers accurately first should be awarded a prize.</em>

Also if your solution it's good I have to award the user that answer first.

Tnx,
Pietro


erez213 comments:

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


erez213 comments:

BTW you can split the money if you want


pmalerba comments:

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

No erez213,

<blockquote>04/13/10 1:32pm
erez213 says: </blockquote>


<blockquote>04/13/10 1:18pm
Jarret Minkler says: </blockquote>

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

[[LINK href="http://javascriptquestions.com/uploads/pmalerba_php9VRekS.jpg"]]See this image[[/LINK]]
(Without css, just the display of pages)

With this clarification your answer could be the best one.



erez213 comments:

http://wordpress.pastebin.com/Kxcgv55U
Enjoy,I add pages num


pmalerba comments:

Hi Erez213,

have you tested your code? http://pastebin.me/db8d97f7df9c21abc834f6d9fdd79807
I have just tried it and seems to be not working.


erez213 comments:

yes i did. i will check it again


erez213 comments:

Sorry man,I can't check the code from where I am,can you tell me exactly what the problem is?


pmalerba comments:

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.


erez213 comments:

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


pmalerba comments:

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!

2010-04-13

Jarret Minkler answers:

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


pmalerba comments:

<blockquote>This is what populates the images

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

Yes, around line 33 there is the call to flickr pluglin with the <strong> selectedID </strong> 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.

<blockquote>
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);
}
});
}</blockquote>

Maybe it's a good idea. Could you provide a working example? I'm a jquery newbe :)

Tnx


Jarret Minkler comments:

Sure


Jarret Minkler comments:

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


pmalerba comments:

Tnx for your solution!

According with FAQ 5.
http://javascriptquestions.com/page/static/name/About
<em>Ultimately, whoever answers accurately first should be awarded a prize.</em>
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


<!-- //*** Here page number ***// -->
<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