回首頁
訂閱最新文章
歡迎留言
twitter me
Saturday, December 09, 2006

Flickr slideshow放入文章測試




以下引用自http://roxytom.bluecircus.net/archives/004609.html

我蠻喜歡Flickr所提供的slideshow功能
也一直想在blog的文章裡直接套用
無奈本人肉腳 始終找不到辦法
只能以連結方式處理

昨天意外學到iframe標記的使用方式
靈機一動 拿來試試
果然如本人所料 成功達陣

野人獻曝 將語法敘述如下
提供給有需要的人一同玩樂
那些精通網頁編寫的前輩們笑話我大驚小怪沒關係
但若是我以下的敘述之中還有可以精進、修正之處
也請您記得高抬貴手 順便指點一二

經過嘗試之後
我採用的語法如下:

<iframe frameborder="0" width="500" height="500" scrolling="no" src="http://www.flickr.com/slideShow/index.gne?set_id=#####"></iframe>

我知道大家都很聰明 都看得懂
但為了加重本文的份量 還是讓我雞婆說明一下...

"frameborder"是用來設定要不要邊框
以IE跟Firefox來說
要的話填"1" 不要就填"0"
但KKman的話沒差
填"1"或填"0"都看不到邊框

"width"與"height"是用來設定寬度與高度 在此兩者數值相同
這一項有點小複雜
以IE來看 因為是向內包框
所以有邊框的話要填"504" 沒邊框的話要填"500"
以KKman來看 因為不會顯示邊框
填"504"或"500"都沒差
以Firefox來看 因為是向外包框
所以不管有沒有邊框 填"500"都OK
看到這裡 你是不是花去了?
哈哈!
好啦 簡單一點
都填"500"吧 管IE去死...
不是啦 我意思是
除非那些用IE的人特別去注意
否則真的看不出來這個子視窗的右邊有4px寬的區域被擋掉了啦
另外還有個特殊狀況
那就是當blog版型的主欄寬度值小於500的時候
如果iframe語法中的寬度值依然設為500
那可能會導致版型移位(比如邊欄會往下掉)
若是遇上這個狀況
不妨試著把寬度值設為"100%"
也就是把語法改為:

<iframe frameborder="0" width="100%" height="500" scrolling="no" src="http://www.flickr.com/slideShow/index.gne?set_id=#####"></iframe>

如此一來應該可以省事不少
不用花功夫去抓自己的寬度值:)

來 繼續
"scrolling"是用來設定這個子視窗要不要捲軸
要就填"yes" 不要就填"no"
(應該沒人會想填"yes"吧?!@@")

"src"要填"view as slideshow in new window"的連結網址
應該都是"http://www.flickr.com/slideShow/index.gne?set_id=#####"這樣的格式
但請記得自行以目標相簿的編號(set ID)取代"#####"
而除了設定"set_id="為展示參數之外
也可以設定"nsid="、"text="、"tags="、"tag_mode="、"user_id="、"favorites="、 "group_id="、"contacts="、"frifam="、"single="、"firstIndex="、"firstId="為展示參 數

另外 如果想把slideshow的視窗居中
語法則應修改如下(兩種方式我都試過 但瞧不出結果有啥不同之處):

<center><iframe frameborder="0" width="500" height="500" scrolling="no" src="http://www.flickr.com/slideShow/index.gne?set_id=#####"></iframe></center>

或者

<iframe frameborder="0" width="500" height="500" scrolling="no" align="center" src="http://www.flickr.com/slideShow/index.gne?set_id=#####"></iframe>

就這樣!
很簡單吧?!
如果以上說明有啥不是很正確的地方 歡迎提出指正
沒有的話 那就掌聲鼓勵一下吧!:)

HEMiDEMi Technorati Del.icio.us MyShare個人書籤 Yahoo

No comments: