« 上一篇 | 下一篇»

將Picasa相簿內嵌在blog上(2)

26 三月, 2008 23:37 •  (12) 迴響  •  引用(1)  •  8549 hit.  • 分類: Picasa   

之前寫過這一篇文章「將Picasa相簿內嵌在blog上 」,那是用<iframe>的方式自己手動作出來。

現在,Picasa網路相簿已經有新的方法可以直接將<embed>語法複製後貼到你的blog或網頁上了。

就像這樣

 

怎麼做呢?

這功能是Picasa相簿的新功能,在繁體中文的Picasa相簿還看不到這功能,所以必須先將Picasa相簿的語言改為 English(United States)

登入Picasa網路相簿後,按下畫面右上角的設定 

 

回到你的公開相簿

點選你要使用的相簿

在相簿的左側就可以看到這「Embed Slideshow」 的選項了。

[2008/10/25 update]

在相簿的右側就可以看到「Link to the album」的連結

按下這連結,就可以看到 「Embed Slideshow」的選項了

跳出設定畫面,可以設定你要顯示的相簿投影片的尺寸大小、「Show captions」是否顯示圖片說明,「Autoplay」是否自動播放。

最後將下面的語法複製後貼到你的blog上就可以囉! 

另外若要加上每一張照片的文字說明,按下相簿上的「Edit Captions

這樣就可以在Slideshow上看到說明文字了。 

補充:

在上面顯示出來的相簿,你有沒有發現有藍色的邊框?
 

若是直接用Picasa相簿上的Embed語法,是看不到邊框的,就像下圖一樣
 

你可以自己修改一下。

例如我這相簿Slideshow的語法為

<embed type="application/x-shockwave-flash" src="http://picasaweb.google.com.tw/s/c/bin/slideshow.swf" width="400" height="267" flashvars="host=picasaweb.google.com.tw&captions=1&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com.tw%2Fdata%2Ffeed%2Fapi%2Fuser%2Fhlpstest3%2Falbumid%2F5182079292631082657%3Fkind%3Dphoto%26alt%3Drss" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> 


上面紅色的部份,我把它分別該成 width="420"、height="287"、RGB=0x4FB6E5, 這樣就可以出現藍色邊框囉!

[03/30 補充]

在 LifeType 系統裡,記得要修改 /js/tinymce/tiny_mce-plog.js 這檔案,在「extended_valid_elements」裡加上

embed[type|height|width|autostart|src|wmode|FALSE|TRUE|FlashVars] 

LifetType 預設把 embed 語法當作不合法的參數,會被吃掉,就顯示不出這Picasa相簿了。

創用 CC 授權條款
 
 
Related Posts Plugin for WordPress, Blogger...

12 Comments on "將Picasa相簿內嵌在blog上(2)"

 

  1. free

       作者 eric19740521       [管理]

    我自己在網站上面弄了一個個人廣告覺得很不錯可惜沒有輪播的有興趣可以看一下問題

    http://easysoft.twelife.com 速達軟件,免費會計,進銷存,POS,庫存系統軟體

  2.  

  3. 請教一下

       作者 tia       [管理]

    請問老師我依方法下去做,但是我的相本中沒有Embed Slideshow這個選項,請教是什麼原因

    因為Picasa Web Album改了版面,將連結放到頁面的右側去了,我已更新了上面的文章。

     

  4.  

  5. 如何讓slide show能夠loop?

       作者 amelie       [管理]

    請問用這個方法箝入相簿要如何讓slide show能夠loop呢?

    試過加入loop="true"好像也不行....~>_<~

    不清楚了,我加上loop也是沒用。

  6.  

  7.    作者 Mardy       [管理]

    阿欣老師您好:

    看了您的文章,解決我分享照片的困擾大笑

    可以請問照片的"文字說明"字型大小要如何更改?我在mac電腦上看起來很美,但是在win上卻是醜醜的14-16號大小的新細明體><

    我想改掉它啊~~麻煩老師解惑,謝謝肛溫啦~~

  8.  

  9.    作者 阿郎       [管理]

    阿欣老師您好:

    謝謝...

    我的文字編輯器按照http://blog.nlhs.tyc.edu.tw/post/2/22改成了TinyMCE

     

  10.  

  11.    作者 阿郎       [管理]

    阿欣老師您好:

    我試著將「height="600" /」最後面那個「/」拿掉!迴響部分依舊出不來,

    再回到[HTML]裡,怪事!那個「/」又出現了!

    剛剛才發現你的LifeType版本為1.0.6版,印象中那時的文字編輯器還是htmlarea。

    不知道你現在的文字編輯器是什麼呢?有改成TinyMCE嗎?

    晚點我再裝一套1.0.6來試試看吧!

    阿欣 15:18:07


    剛裝了1.0.6,發生跟你一樣的問題,我再找找看有沒有辦法啦!

    阿欣  15:25:37

     

  12.  

  13.    作者 hsiaosh       [管理]

    阿欣老師:

    終於讓我找出問題所在了!剛開始加上您補充的那行以後,仍然未能正常顯示,於是便更積極地思考,到底問題是出在那裡?最後才讓我試出,原來我一直有使用「插入flash」的外掛,兇手就是它,只要把此外掛拿掉,便可以正常顯示了。

    但是,我偶爾會有用到插入 flash 的功能,如今,變成為了這個相簿,必須要拿掉 flash 的外掛,會讓我有點難以抉擇,不過,總算是找到問題了。

    感謝您的指導!

  14.  

  15.    作者 richard       [管理]

    阿欣老師您好,

    我試了您這篇文章的介紹,但不管黑色或是藍色的邊框,原本傳上去的照片都會比框框小,

    看老師的範例,裏面的照片都比較大,差不多跟框框一般大,不知這是上傳時有設定的選項沒有設好

    還是有那裏需要選擇的呢?? 另外如果是直式的照片不知道那個flash播放的介面是不是可以更換成直式的??

    最後再請教老師不知gallery相簿是不是也有提供和picasa這個嵌入類似的功能呢??

    謝謝!!


    我猜你是不是在設定embed時選擇了較小的尺寸

    但是後來又自己改了大小,但width又沒超過400。

    建議你依照Picasa web提供的參數來嵌入吧!若要加背景框,則將width、heiget再稍微多一些即可。

    直式的播放方式,好像沒看到Picasa有提供,若一定要,請試試用<iframe>的方式吧!
    將Picasa相簿內嵌在blog上

    另外gallery2我目前還沒看到有提供embed的語法,可能還是得自己手動用<iframe>來嵌入,關於這要的方次,你可以參考一下阿郎老師的「在部落格裡嵌入班級相簿的照片幻燈秀

    阿欣 2008/03/31 12:42:56

  16.  

  17. 是迴響不見了....

       作者 阿郎       [管理]

    李老師您好:

    抱歉,再打擾您一下,我的意思是說我用<iframe>語法將gallery2的slideshow嵌入在部落格中

    網頁下面"迴響"的部份"不見了"!好像是最後的</frame>標籤被過濾掉了,請問這有解嗎?

    謝謝您......

    其實你的<ifame>並沒有被吃掉,看看你那網頁的原始檔就知道。

    試試看把你那一段<iframe>的語法

    <iframe marginwidth="0" marginheight="0" src="網址" frameborder="0" width="660" scrolling="auto" height="600" /></iframe>

    在「height="600" /」那裡,先把最後面那個「/」拿掉看看吧!

    阿欣 10:27:41

  18.  

  19.    作者 hsiaosh       [管理]

    阿欣老師:不好意思,又要請教了。

    那段相簿Slideshow的語法,在我的部落格上,始終無法貼上,從HTML貼上後,回到正常模式下,再回去看,整個原始碼最重要的路徑部分,全都不見了,變成如下的樣子:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="400">
     <param name="movie" value="http://picasaweb.google.com.tw/s/c/bin/slideshow.swf" />
     <param name="quality" value="high" />
     <param name="menu" value="false" />
     <param name="wmode" value="" />
     <embed src="http://picasaweb.google.com.tw/s/c/bin/slideshow.swf" wmode="" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="400"></embed>
    </object>

    所以,當然也看不見SlideShow了。請問,我該如何處理?

    奇怪了,Picasa web album給的語法只有 embed,怎麼會變成了object呢?

    先建議你改一個地方,你的/js/tinymce/tiny_mce-plog.js裡面,在extended_valid_elements那裡embed的參數,再加上一個「FlashVars」給它。

    變成

    embed[type|height|width|autostart|src|wmode|FALSE|TRUE|FlashVars]

    再看看可不可以囉!

  20.  

  21.    作者 阿郎       [管理]

    李老師您好:

    請教你一個問題,我利用<iframe>語法將gallery2的slideshow嵌入在部落格中

    發現迴響的部份會消失,就像這樣http://163.17.210.4/plog/index.php?op=ViewArticle&articleId=879&blogId=1

    查了google後知道原因是</iframe>語法被lifetype濾掉了,請問這有解嗎?該如何修正呢?

    謝謝您......


    應該沒問題了吧!我有看到slideshow喔!
    阿欣 2008/03/30 03:21:41

  22.  

  23. 感謝老師!

       作者 hope       [管理]

    阿欣老師:

    謝謝,非常謝謝您詳盡嚴謹的說明!

    我已經學會了,在一早即擁有學習成長的成就感!

    去年開始,我一直在您這個學習平台閱讀與學習,

    感恩老師讓人如沐春風的知識分享,導引許多學習者求知若渴的心。

    感謝,誠摯感謝老師!

     

  24.  

發表迴響
 authimage

Google+ 迴響

*********