OUi-BLOG 3.0 ::: Flickr相片展示教學

相信熟知 Flickr 的各位應該都知道Owen曾經發表過一篇很實用的文章 - 《通過 CSS 交叉控制 Flickr 的顯示效果》，可以將 Flickr badge 利用 CSS 設定的方法更改其顯示方式，其中Owen所使用的顯示方式為4*2排列，喜歡這樣方式的朋友可以直接前往該站取經，小弟這邊提供另一種佔用篇幅較多、但顯示較為多樣的組合顯示方式。(修改自原Owen所使用的語法，特此致謝)

如下圖所示：

請參考小弟的實作範例

各位從上圖的解說文字中可以看到，該顯示使用 1加4 的組合方法，其中上方主圖為隨機顯示所有儲存於使用者 Flickr 帳號下的照片；下方即為最新上傳的四張照片。使用這個方法好處是即便久未更新 Flickr 內的圖片，還是會隨機顯示圖片。

製作方式如下：

下載圖例中所使用的 Flickr 圖示
(當然您也可以使用您喜歡的顯示方式)

請登入您的 Flickr 帳號，並於 Home 頁面的原始碼內找出您的global_nsid，應該是在頁頭的部分，<head> .. </head> 內；或者您可以於 Flickr Badge 的製作網頁中取得。

請於您的相關CSS樣式表內，貼入以下語法：

div.flickrimg {
margin: 10px;
}
div.flickrimg a {
float: left;
padding: 0;
margin: 0 5px 5px 0;
border: 1px solid #f6f5ea; (請自行調整)
}

div.flickrimg a:hover {
border: 1px solid #666; (請自行調整)
}

div.flickrimg a img {
height: 40px;
width: 40px;
border: 1px solid #ffffff; (此為圖片外框與圖片之間的1px間隔)
}

div.flickrimgb {
margin: 10px;
}

div.flickrimgb a {
float: left;
padding: 0;
margin: 0 5px 5px 0;
border: 1px solid #f6f5ea; (請自行調整)
}

div.flickrimgb a:hover {
border: 1px solid #666; (請自行調整)
}

div.flickrimgb a img {
width: 186px;
border: 1px solid #ffffff;
}

並於模板中相關位置，使用以下語法：

<div class="flickrimgb"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=1&display=random&size=m&layout=x&source=user&user=Your global_nsid"></script> </div>
<div class="flickrimg"> <script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=Your global_nsid&count=4&display=latest&name=0&size=square&raw=1"></script> </div><br style="clear: both;" />
<div class="請配合頁面樣式設定">» See more pictures in my <a href="http://www.flickr.com/photos/您的 Flickr 帳號" target="_blank"><img src="http://links.to/flickr_logo_beta.gif" border="0" align="baseline"></a></div>