如何将Flickr API返回的图像放入不同的页面?

时间:2013-02-23 04:08:32

标签: php javascript api flickr

我正在尝试创建一个网页来显示Flickr API返回的一些图像。但是有数千张图片返回,所以我不能把它们放在同一个网页上,因为人们需要一直滚动。所以我想把它们放在像我们通常所拥有的单独的页面中,例如,“接下来”。但我不知道如何实现这一点。我认为使用javascript告诉用户选择哪个页面然后将此号码发送到API请求。但是,API由php处理,我不知道如何从JS向PHP发送值,所以我还没有解决这个问题。任何人都可以提出任何想法!谢谢!

四月

2 个答案:

答案 0 :(得分:0)

我对flickr api不熟悉,所以我不确切地知道你想如何分页,但只要查看你发布的内容就可以使用ajax来请求API调用。所以在你的h4做类似的事情:

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

然后做一个jqueryish调用,如:

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

然后有一个javascript图像处理函数,它可以获取图像并处理它们/将它们显示给用户。

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

我希望这种设置有意义。这似乎是你想要做的。您可以使页面动态化并仍然传递标签。那么你真的不需要PHP来设置你的页面,但是根据你的用户选择标签的方式,你仍然可以通过PHP来实现。我可能会通过javascript做点什么。

答案 1 :(得分:0)

以下是此问题的最终解决方案: 用于Flickr API调用的php代码:

$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";

解决方案不是将$ page分配给特定的数字,而是使用以下语句:

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

通过这样做,php文件将直接通过Flickr API获取页面。

然后我使用一些DOM元素,例如

作为“下一页”和“上一页”的链接,以帮助您浏览不同的页面。

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>";

最后,感谢所有帮助过的人。