« 上一篇 | 下一篇»

將Picasa相簿內嵌在blog上

02 五月, 2007 22:43 •  (14) 迴響  •  引用(2)  •  15031 hit.  • 分類: Picasa   

之前寫過這一篇「1000MB的Picasa相簿 」(現在已變成1024MB了),有人問如何使用呢?所以寫這篇文章來介紹一下。

我以我的這一個「高雄都會公園 」相簿來做說明 。

960216- 高雄都會公園

 

一、內嵌到 Blog/MySpace

效果就如上面的示範,登入Picasaweb後,在每個相簿的左側就可以看到「內嵌到 Blog/MySpace」 的連結,按下連結後,會出現一些原始碼,將原始碼複製後再貼到文章上就可以了。

ps:以LifeType來說必須先切換到html編輯模式,然後在適當位置貼上語法

二、內嵌投影片觀賞模式

在相簿上,有個投影片的連結,按下這連結,就會以投影片放映的方式來自動播放相片了,例如我的這一個相簿

而且Picasaweb 上投影片播放的照片尺寸大小,會根據你的瀏覽器視窗的大小來自動調整相片大小,其實也因為它會自動調整大小,所以我們才能比較方便地將這投影片播放內嵌在blog上。
 

怎樣內嵌呢?就是利用html裡的<iframe>的語法將上圖的網頁呈現在我們的blog上,<iframe>就是可以讓你在網頁上顯示另一個網頁。所以我們要先簡單認識一下<iframe>語法的使用方式。 

詳細的<iframe>教學可以參考這兩篇文章「內嵌框架 iframe」、「內套框架」 。

我直接以下面我用到的語法來做說明。

<iframe frameborder="0" height="385" scrolling="no" src="http://picasaweb.google.com/hlps9999/96021602/photo#s5032191366313944866" width="507"></iframe>

frameborder="0" → 邊框厚度為0,也就是不要有邊框,若你設"1"、"2"...,就有不同厚度的邊框。
height="385" → 畫面顯示的高度385像素
src="網址"
→ 也就是上圖的網址。
scrolling="no"不要出現捲軸
width="507"畫面顯示寬度507像素

上面寬度、高度的大小由你自己決定。

  • 呈現出來的效果

不難吧!

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

14 Comments on "將Picasa相簿內嵌在blog上"

 

  1.    作者 Q       [管理]

    阿欣老師:
    我用IE看Gallery相簿,已經往上拉到最頂端了,第一本相簿的標題都會看不見
    如圖
    但是用火狐則沒這個問題,看起來都很順
    如圖
    不知道要怎麼修改Gallery才能使IE也可以完整顯示?

  2.  

  3. 很受用

       作者 小米麻糬       [管理]

    您好!

    看到您這篇,好像看到救星,我將它連結到我部落格上了http://blog.yam.com/showme100/article/25241217,做為我的電腦學習,感謝。

    這篇文章的作法,其實是很早期不得已的作法(當時picasa相簿還沒提供embed語法),現在 picasa相簿已直接提供 embed 語法了,你可以看看這一篇文章「將Picasa相簿內嵌在blog上(2)

    」,應該會更簡單,而且繁體中文的語系也早已可以使用,不需要再改成 english語系了。

  4.  

  5.    作者 風言風語       [管理]

    登入picasa網路相簿中, 將語言設定改為英文之後, 再進入公開相簿中, 選擇一相簿, 就可以看到左邊有一個 "Embed Slideshow" 按一下, 就會出現內嵌式語法視窗. 可選擇內嵌式的大小尺寸. 將之語法貼到部落格文章中即可. 對於不會網頁語法的人而言非常方便.

  6.  

  7.    作者 阿欣       [管理]

    小麻;
    哇!超漂亮的。他是抓flickr上的圖片來展示。

    網頁上有說:
    Licensing

    If you are interested in using TiltViewer on your own site, or licensing the source-code, please contact: licensing@airtightinteractive.com

    應該要付費吧!

  8.  

  9. 又來打擾~

       作者 小麻       [管理]

    http://www.airtightinteractive.com/news/?p=92

    請問一下 這個是新發布的模組 我看了半天~ 沒有下載的部分><

    是不是要花錢買啊..我英文差  可以看一下嗎 這個模組好炫..haha 也跟你分享嚕~ 因為我超愛picasa的網路相本

    對我工作展示圖片很有幫助

  10.  

  11.    作者 Yukie       [管理]

    我覺得 PicasaWeb 用在網頁上還有一點比不上 flikr 的地方,
    就是 PicasaWeb 的 hack 還不多。
    所以,如果我想要在我的 blog 右邊欄挖個框,
    然後頁面每一次 reload 時都隨機抓一張相片顯示在右邊欄中,
    PicasaWeb 目前似乎做不到,
    但是 flikr 就有這樣的功能。

    但 Picasa 的容量大,速度快,也是很棒的一個選擇就是了!!:)

  12.  

  13.    作者 yuchin       [管理]

    原來如此,使用embed的tag就能解決這樣的問題
    由於我的FireFox有使用MediaWrap的pluging
    所以就算使用IE only的語法也都能正常對應到應用程式
    我在阿欣老師的教導下學到了很多寶貴的東西
    再次的感謝您!!

    另帶一題 Picasa上傳真的很方便呦酷喔

  14.  

  15.    作者 阿欣       [管理]

    yuchin:
    flicker我只有在2、3年多前用過一陣子,所以不敢說它好不好用。

    至於Picasa,喜歡用它是因為照片用Picasa處理好了之後,按個按鍵,就可以將照片直接上傳,喜歡他的簡單、快速。

    那東森的即時新聞應該是他本身的問題,跟iframe沒關係,不然試試看用firefox直接去看他那網頁,也是一樣的結果。

    剛好又看到你那網路收音機,在firefox下一樣看不到,試試看把那網路收音機的原始碼改成下面這樣,在IE、firefox就都可以看到、聽到了。

    <embed src='mms://media.iwant-in.net/pop' type='video/x-ms-wmv' width='75' height='28' autoStart='1' ></embed>

    embed還有許多參數可以用,建議可以去看看這一篇文章,講得很詳細唷。
       

  16.  

  17.    作者 yuchin       [管理]

    非常的感謝你在我部落格的留言板提供用iframe嵌入UrMap!!
    同時從你的部落格發現Picasa似乎比flickr好用
    呵呵 我該轉站到Picasa嗎??
    感謝你的方法!!我已經成功嵌到網頁裡了
    當初也有想到此方法
    不過我以為這個方法在FireFox理是無效的
    因為同樣是iframe的語法
    我網誌最下面的的即時新聞在FireFox下看不到,但切到IE瀏覽器就能看到
    問題是出在ETtoday嗎??

  18.  

  19.    作者 阿欣       [管理]

    Question:
    用embed來直接抓那個.swf檔是沒辦法顯示照片的。
    因為simpleviews並不是將所有資料轉成那個.swf,那個.swf檔(在你下載回來的simpleviews原始程式裡就有這檔案了)就好比只是個介面而已,他需要有其他的照片,文字檔等其他配件的組合,才能看到效果。

    至於有沒有其他解決方式?我還沒想到。

  20.  

  21. 阿欣老師您好~我有事相求

       作者 Question       [管理]

    問題是這樣的  我最近利用你說的simpleviewer做了一個flash相簿

    也想照您所說的  將相簿貼在blog上面

    (不是要超連結開啟另一個網頁 而是網誌裡面就可以看相簿)

     但是因為我的網誌空間是無名小站   不支援iframe 語法

    所以就沒有辦法用老師教的方法將index.htm檔貼上去

    後來我想說那用embed的語法 直接貼swf檔案好了

    (之前有在網誌用過這樣的語法貼swf  成功)

    但是問題來了

    http://www.freewebtown.com/kuowei/2007/viewer.swf
                                                                                   
    這一個網址如果直接開啟  是沒問題的
                                                                                   
    但是如果我在無名的網誌
                                                                                   
    利用貼swf的語法發表文章(語法如下)
    <embed src="動畫網址" width="顯示寬度" height="顯示高度"></embed>
                                                                                   
    就會跟我說  gallery  not  found
                                                                                   
    請問一下這是什麼問題呢

  22.  

  23.    作者 Leeson       [管理]

    這方法好棒喔!感謝老師詳細教學分享~太可笑嘍

  24.  

  25.    作者 阿欣       [管理]

    小原:
    儘管拿吧!
    以前有想過要寫個較完整的Picasa教學,不過....,只寫了一點點,有需要你也可以參考看看
    http://163.17.156.130/moodle/course/view.php?id=74

  26.  

  27. 阿欣老師您好,有一事相求!

       作者 小原       [管理]

    阿欣老師您好:

    長時間觀看老師您的文章,讓我獲益良多!真是粉感激~~
    在這裡,有一事相求,

    因為要辦理自由軟體研習,所以選定了主題是picasa的應用及製作。
    但是因為本身不是很厲害,再加上英文程度不是很好。
    所以想使用老師您所POST的文章,希望能獲得您的允許!!

    在此先對您萬分感激,謝謝!!

  28.  

發表迴響
 authimage

Google+ 迴響

*********