透過 Flickr API 將相簿玩出新花樣!

首頁 > API > 透過 Flickr API 將相簿玩出新花樣!

透過 Flickr API 將相簿玩出新花樣!

2009年12月30日 DoReMiCat 發表評論閱讀評論

筆者最近在幫公司弄個結合Flickr的相簿~
Flickr API 有多強勁? Flickr 當後台有多方便 ??
在這就暫不多說，本篇文章只跟您分享實作Flickr API 經驗分享~~

相簿規劃
1.透過Flickr API建構個人相簿 (USER 可由Flickr 編輯、修改、上傳相簿)
2.透過JQuery 讓相簿更生動 (用JQuery 產生相片輪播的效果)
3.首頁須有照片牆能個別連到相簿中的個別照片(每張照片有自己獨立URL)

由於公司語法的要求~上列規劃的需要~所以本篇文章程式設計是由
Flickr API + JQuery + PHP 構成~~ 本篇將歸類於API分類!!

第一步，先到Flickr下載Flickr API
http://www.flickr.com/services/api/下方有各語言的API下載
PHP版本的我是用phpFlickr 請直接按我到下載頁面

第二步，到Flickr申請一組帳號，然後再到 http://www.flickr.com/services/api/ 申請一組API KEY

申請商用或非商用就由您自己選擇

2種申請所需填寫的資料有所不同，填一填同意之後送出你將會得到一組KEY及密鑰

ex.

key： fa8c785b8b3cc8e41XXXXXXXXXXX
密鑰： beff4d6cXXXXXX

先把他存到記事本，待會我們會用到~~

第三步、有了key我們就先試著讀取Flickr裡的照片看看

取出照片必須使用 flickr.photosets.getPhotos 這個方法
flickr.photosets.getPhotos 不須傳入密鑰認證，但必須傳入KEY值及photoset_id
使用方法請見http://www.flickr.com/services/api/flickr.photosets.getPhotos.html

所以我們必須先透過 flickr.photosets.getList方法，來取得photoset_id
flickr.photosets.getList 須傳入user_id

<?
require_once("phpFlickr.php");

$f = new phpFlickr("填入您的KEY");
$userurl= '填入您的user_id';

print_r( $f->photosets_getList($userurl) );
?>

這樣就可以列出 flickr.photosets.getList 回傳的XML
ex.

Array ( [photoset] => Array ( [0] => Array ( [id] => 72157622967353205 [primary] => 4224009933 [secret] => 379278f674 [server] => 4033 [farm] => 5 [photos] => 15 [videos] => 0 [title] => 2009愛無限 愛滋不見 [description] => ) [1] => Array ( [id] => 72157623091895800 [primary] => 4224805878 [secret] => 2f227abc5e [server] => 4054 [farm] => 5 [photos] => 27 [videos] => 0 [title] => 2009全國大專盃暨KISS美少女啦啦隊選拔賽 [description] => ) [2] => Array ( [id] => 72157622967160681 [primary] => 4223798635 [secret] => 65c23fed61 [server] => 2542 [farm] => 3 [photos] => 40 [videos] => 0 [title] => 2009耶誕有愛 美夢成真 [description] => ) ) )

也有更簡單取得您的user_id 及 photoset_id 的方法
登入Flickr之後，直接到下面這個URL
http://www.flickr.com/services/api/explore/?method=flickr.photosets.getList
Flickr統統幫您列出來了~當然透過Flickr的網頁也可以直接做傳值的測試~~相當方便!!

當取得photoset_id之後，我們就直接寫一段程式去列出所有照片吧

<?
require_once("phpFlickr.php");

$f = new phpFlickr("填入您的KEY");
$photoset_id = "填入您的photoset_id";
$photos = $f->photosets_getPhotos($photoset_id);
foreach ($photos['photoset']['photo'] as $photo) {
$html .= "<img border='0' width='62' height='62' alt='$photo[description]' src='".$f->buildPhotoURL($photo, "Square")."' id='photo_".$photo['id']."'></a>";
}
echo $html;
?>

直接就變成照片牆囉!!

第四步，利用JQuery控制照片輪播

JQuery插件百百款~~筆者是用 jCarouselLite

有關 jCarouselLite 的設定方法請參照下列URL

http://www.flying-h.co.jp/corder/2008/05/jcarousellite.html

載入jCarouselLite

設定 jCarouselLite 相關設定

我們可以利用 jCarouselLite 的 start屬性來模擬每張照片有一個固定的URL

所以start我們用php去接收GET所傳進來的值~~~

start屬性為JQuery輪播時起始點的照片，此外還必須將peed時間延長一些

以防止照片牆點選照片過來時，圖片載入太慢而javascript己經在計時而跳圖

</pre>
$(function() {
 $("#phpFlickr").jCarouselLite({
 auto: 10000,
 speed: 2000,
 scroll: 1,
 visible: 1,
 btnNext: ".flickrnextks",
 btnPrev: ".flickrprevks",
 start: <?if($_GET["start"]!=''){ echo $_GET["start"]; }else{ echo "0"; }?>,
 circular: true
 });
});
<pre>

弄好之後就會像這樣範例連結

第五步，隨機照片牆 (以下為我弄的範例，不一定要照我做)
主要規劃如下
1.列出每行5張照片共3列的照片牆
2.從Flickr 隨機挑選相簿並隨機列出

<?php
require_once("phpFlickr.php");
// Create new phpFlickr object
$f = new phpFlickr("填入您的KEY");
$html .= "<ul class='thumb'>";
for($x=1;$x<=3;$x++){  //共3列

 $photorand = rand(1,3); //隨機取1~3的數字
 switch($photorand){ //判斷要取哪一本
 case 1:
 $photoset_id = "填入第一本相簿photoset_id";
 break;
 case 2:
 $photoset_id = "填入第二本相簿photoset_id";
 break;
 case 3:
 $photoset_id = "填入第三本相簿photoset_id";
 break;
 }

 $photos = $f->photosets_getPhotos($photoset_id);
 $s = count($photos['photoset']['photo'])-1; //Flickr第一張照片起始為0,所以這裡-1
 for($y=1;$y<=5;$y++){ //每列5張照片
 $i = 0;
 $run = rand(0,$s);
 foreach ($photos['photoset']['photo'] as $photo) {
 if($i==$run){
//組合html
 $html .= "<li><a href='http://www.kiss.com.tw/phpFlickr/album.php?photoset_id=".$photoset_id."&start=".$run."' >";
 $html .= "<img border='0' width='62' height='62' alt='$photo[description]' src='".$f->buildPhotoURL($photo, "Square")."' id='photo_".$photo['id']."'></a></li>";
 }
 $i+=1;
 }
 }
 $html .= "<br/>";
}
$html .= "</ul>";
?>
 <div>
 <div>
 <div><a href="/phpFlickr/album.php?photoset_id=72157622967160681&start=0" target="_blank">更多照片>></a></div>
 <span>活動剪影 <img src="/images/content_box_title_deco.gif" width="30" height="9" align="absmiddle"></span>
 </div>
 <div style="align:center;">
<? echo $html; //列出所組合好的html碼 ?>
 </div>
 <div></div>
 </div>

<pre>

弄好之後其餘的就是CSS去美化一下就成功囉~~