September 6,2006

幾種Flickr 相簿效果

 

 

大Flickr網路相簿又有新花樣了。小插件_badgr 讓Frickr的播放場景更有看頭!


 事前工作

[步驟]

1.申請Flickr相簿帳號。yahoo與Flickr合作,yahoo會員可以直接用yahoo帳號加入Flickr會員。使用者有免費與付費兩種會員制。當然,免費的會員相簿享受的功能就少,每個月有20MB圖檔上傳限制,雖然丟了一堆相片上面,但最多也只能秀出200張。

2.上傳圖檔檔案。

註冊好了以後,按照作業系統,先行下載上傳程式,以方便一次上傳多圖。

3. 在Flickr相簿的工具列裡,按下 you ,

 

 

然後在網址欄裡就可以找到你的usernameID(你的ID)

http://www.flickr.com/photos/你的ID@N00/

 

 

 

 

 Create your own Flickr badge

 Flickr相簿所提供的2種基本badge 效果

 按指示  choose photos(選擇照片)   color(選擇badge版面顏色) ,layout(設定規格)。設定好相簿規格,再copy code語法,貼到blog邊欄區(sidebar),欲顯示的位置即可。

1.An HTML badge

 [code語法]


<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; text-align:left; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=h&source=user&user=你的ID%40N00"></script>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/你的ID@N00/"><img id="flickr_badge_icon" alt="helenna's photos" src="http://www.flickr.com/images/buddyicon.jpg?你的ID@N00" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt"><nobr>More of</nobr> <a href="相簿名稱">http://www.flickr.com/photos/你的ID@N00/">相簿名稱 photos</a></td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>

 

2. A Flash badge

  [code語法]


<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #000000; background-color:#ffffff;  color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=48891737%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne" style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">what is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="www.http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="helennahttp://www.flickr.com/photos/你的ID@N00">helenna</a>. Make your own badge <a href="here.http://www.flickr.com/badge_new.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>

 

 

 

 

 

 

 

 

再來,Flickr亦有許多支援套件。利用badgr 2.0 來美化Flickr相簿的badge也是很棒的效果。

 

1. badge 效果

 

 

 

 

 

 

 

 

 [code語法]

<embed
src="http://www.mentalaxis.com/fl8/badgr.swf?userid=你的ID@N00&limit=25"
quality="high" width="190" height="190"
type="application/x-shockwave-flash" /></embed>

 

2.跑馬燈式相簿播放效果

<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1
scrollDelay=60 direction=up width=172 height=300>
<DIV class="flickrimg">
<SCRIPT src="http://www.flickr.com/badge_code.gne?nsid=你的ID@N00&count=照片數目&display=latest&name=1&size=圖檔規格"
type=text/javascript>
</SCRIPT>
</DIV>
</MARQUEE>

 

display(顯示照片tag)  least : 最新上傳的tag。radom:隨機顯示tag。

name (相簿名稱) 1(顯示) ; 0 (不顯示)相簿網址。

size (照片規格) mid(中等大小,局部會隱藏,游摽靠近時會完全展開);square (正方形);thumb(縮小圖)。

 

 

 

 

本文瀏覽人氣:





 


Posted by helenna at 樂多Roodo! │03:30 │回應(11)引用(1)Blog練功房
樂多分類:網路/3C 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2110469
引用列表:
想不到我也有被提問有關如何設定格子語法的時候,這真是令人覺得不可思議!不過我還是要感謝alin的提問,因為你的提問,讓我也有這樣的機會回憶自己學習部落格使用時,曾接受過的協助。
【回應】alin的提問【呼吸之間】 at November 22,2009 00:33
回應文章
大姊helenna
可以考慮買一年帳號囉
我覺得很好用
比起國內任何一家相簿系統
支援性更多
Posted by Mark at September 6,2006 10:02
我有買耶~
滿好用的
謝謝helenna的教學
來改一改~~
Posted by ivy at September 6,2006 13:55
dear mark,
因為有打算自己架sever.
目前先還是用自己的硬碟save
所以flickr帳號先緩緩
不過,正如你所言
flickr支援性真的很多


dear ivy,
恭喜你成功了喔^^
Posted by helenna at September 7,2006 12:29
等我看清楚
可能要一陣子....

還是很欽佩妳的腦袋
Posted by 小瓢蟲 at September 7,2006 17:45
dear 小瓢蟲

我才羨慕你的創作力呢
每每就是一個驚艷!!
Posted by helenna at September 8,2006 01:10
真不賴耶 又有新花樣
想當初你分享的"製作gif檔"就幫我的部落格增色不少^____^
Posted by 夾心 at September 10,2006 14:30
dear 妞
好東西大家分享咩
我喜歡嘗試新鮮貨
最近忙著改模板
搞到眼睛快脫窗了....:P
Posted by helenna at September 11,2006 20:56
你好,我想問yam blog的管理版方要加入邊項才phase flash code 因為我因加入自由欄不能做到,希望你能幫到我
Posted by voi at October 15,2006 09:00
dear voi,
你可以進一步告訴我你的問題?
用email
helenna.c@yahoo.com.tw

希望能幫到你
Posted by helenna at October 19,2006 01:02
請問一下helenna

我按照
http://www.flickr.com/badge_new.gne網頁
一步一步弄

最後把他產生給我的A Flash badge的code
貼到樂多自由欄位

不過卻不行
只出現
"
www.flickr.com

This is a Flickr badge showing photos in a set called XXX. Make your own badge here.

"
的連結...


是他給的語法要改?
還是 不能插到自由欄位呢?

謝謝喔
Posted by Xian at October 31,2006 14:06
dear Xian
能給我你的網站和語法嗎?
光這樣敘述
我還無法抓到原因
Posted by helenna at October 31,2006 16:12