CODEWITHSUNDEEP
phpjavascriptapiflickr
April Lee
April Lee

Reputation: 603

How to put images returned by Flickr API into different pages?

I am trying to create a webpage to show some images returned by Flickr API. But there are thousands of images returned, so I can't put them on the same web page because then people need to scroll all the time. So I would like to put them into separate pages like we usually have, for example, "Page 1 2 3 next". But I don't know how to implement this. What I thought was using javascript to tell which page user chooses and then send this number to the API request. However, the API is handled by php and I don't know how to send a value from JS to PHP, so I haven't solved this problem yet. Could anybody give any thoughts! Thank you!

April

Upvotes: 1

Views: 768

Answers (2)

April Lee
April Lee

Reputation: 603

Here is the final solution for this problem: php code for Flickr API call:

$page = 1;
$tag1 = "puppy"; 
$tag2 = "cute";
$flickrUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=blablablabla&tag_mode=all&tags=$tag1\',\'$tag2&per_page=20&page=$page";

The solution is instead of assigning the $page to a specific number, use the following statement:

$page = isset($_GET['page']) ? $_GET['page'] : 1;

By doing this, the php file will get the page retrieved via Flickr API directly.

And then I use some DOM elements for example

as the links for "Next Page" and "Previous Page" to help you navigate through different pages.

echo "<p id=\"nav_bar\">";
$back_page = $page - 1; 
$next_page = $page + 1; 

echo "<a href='?page=1'>First Page</a>";
if($page > 1) { 
     echo "<a href='?page=$back_page'>&laquo; <strong>Prev</strong></a>"; 
} 
// if current page is not last page
if($page != $page_count) { 
     echo "<a href='?page=$next_page'><strong>Next</strong> &raquo;</a>";
} 
$last_page = $page_count;
echo "<a href='?page=$last_page'>Last Page</a>";
echo "</p>";

Finally, thank you for everyone who has helped.

Upvotes: 1

Leeish
Leeish

Reputation: 5213

I am unfamiliar with the flickr api so I don't know exactly how you would want to paginate things, but just looking at what you posted you could use ajax to request the API call. So in your h4 do something like:

<h4 id=\"num_imgs\">
    Page <span data-page="1">1</span> | 
         <span data-page="2">2</span> | 
         <span data-page="3">3</span> | 
         <span data-page="4">4</span> | 
         <span data-page="5">5</span>
</h4>

Then do a jqueryish call like:

$('h4 span').click(function(){
    getImages($(this).data('page'));
}

Then have a javascript image handler function that fetches the images and processes them/displays them to the user.

getImages(page){
    var flickrUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=blablablabla&tag_mode=all&tags=$tag1\',\'$tag2&per_page=20&page="+page;
    $.get(flickrUrl,function(data){
        //PROCESS IMAGES
    });
}

I hope that sort of setup makes sense. It seems to be what you are trying to do. You could make your page dynamic and still pass in the tags as well. Then you really don't need PHP to set up your page, but depending on how your user is selecting the tags, you may still do it via PHP. I would probably do the while thing via javascript.

Upvotes: 0

Related Questions