Frank的雜記

本篇圖片全數支援 Cooliris 原圖展示!!

探討關於 Picasa 貼圖及 Cooliris 與 Lytebox 圖片特效的支援

如果你的網站以圖片為主!應該來看看!歡迎你一起加入探索的行列喔!

 

貼圖示範:

---

一.Picasa 縮圖無連結內嵌貼圖

說明:

無連結內嵌!?明明就只有縮圖 哪來內嵌!?

Frank 之所以會說是"內嵌"原因是

只要你用的是 Firefox 瀏覽器並有安裝 Cooliris 擴充套件
(Cooliris 其他版本下載:Cooliris | Discover More)

就可以在瀏覽支援 Cooliris 的網頁裡

於圖片左下角就會出現這樣的圖示!

點擊!就知道 Frank 說的是啥囉!

而且是大張原圖喔!

這樣清晰華麗的大圖展示感覺不錯吧!!
(想想看你的作品眾人在這樣華麗的介面下欣賞...呵~呵~呵~~!)

重點是~

要如何讓你的網站或部落格支援 Cooliris 對吧!!

那 Frank 就來說說吧!

首先要讓網站或部落格支援 Cooliris 的必要條件是:

1.必須要有一個可上傳的空間(如:Google Page , HiNet 空間 ,自有空間...等)

2.你的網站(部落格的欄位)必須能新增程式碼(如:Xuite日誌...等)

3.當然瀏覽器必須是 Firefox 且有安裝 Cooliri 

接下來用著你的 Firefox 瀏覽器啟動你的 Cooliri 在右下角點擊 Logo

 

開始設定你的網站並點擊加入你的網站

 

此時會出現設定選擇頁 這裡使用選擇的是 Quick & Simple

 

並點擊啟動 Quick & Simple

 

設定開始視窗與步驟說明!點擊 Let's get started >

 

再來就是輸入你的網址囉!並點擊 Add this URL >

 

此時會開始抓取網站的圖片囉!並選擇你要的圖喔!!

 

經過幾次的選擇並正確後會出現下載的頁面 Download XML >

可先於 Preview 連結上預覽結果

若不滿意可於 adding another URL 或 adding more images

加入你想要的圖片!!完成後即可下載 XML 了!

 

然後很重要的是將下載回來的 cooliris-quick.xml 上傳至指定的網站位置 並驗證安裝!!

 

這時如果你是部落格的話大部分會卡在這裡了!Frank 等等再說明囉!

驗證完畢就會有提供一段代碼將之貼到網頁 head 裡就可使用囉!

 

現在 Frank 要說明上階段你若是那大部分的部落格的話該如何設置!?

請先將下載回來的 cooliris-quick.xml 上傳至你的空間

然後將下方代碼填上你上傳的網址

最後將代碼貼上部落格裡的欄位就大功告成囉!!

代碼:
<link rel="alternate" type="application/x-cooliris-quick" href="*你上傳的網站*/cooliris-quick.xml" />

哈哈~~!快樂使用囉!!

 

如果有自有空間 Frank 也推薦 Cooliris 官方提供的圖片展示製作工具:

PicLens Publisher(Windows)可一次性的將你電腦裡的圖片製成

縮圖 大圖 網頁 展示連結 非常方便喔!!

Mac OSX 與 WordPress 請參考:Cooliris | Discover More

 

開始 Picasa 網路相簿貼圖!

要如何得到圖片連結呢!?

你要有一個 Gmail 帳號在 Picasa 網路相簿

在 Picasa 網路相簿上傳圖片

完成後點擊圖片再點擊右方 連結到此相片

其中的 內嵌影像 選擇適合的縮圖裡找圖片連結

或直接複製圖片或圖片網址貼上你的文章裡

但必須不能是原圖 或長寬大於 800 的縮圖

 

當然你如果要直接複製 內嵌影像 裡的代碼也行!如 四. 與 五. 的示範!!
(呵呵!!如果只是要說明此件事兒!Frank 也不需要這樣大費周章惹啦!|||XD)

 

另外若要修改想要的縮圖尺寸在"三."裡會有支援列表喔!

 

做到這裡 之前上傳的 cooliris-quick.xml 裡頭可能沒有支援 Picasa 的貼圖

這是支援 Picasa 原圖展示的 cooliris-quick.xml 寫法

XML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <cooliris-quick version="1.0"> <src>http://(.*ggpht.com.*)s.*/(.*).(.*)$</src> <dst>http://{1}/{2}.{3}</dst> </cooliris-quick>

你可以新增一個重新命名的 cooliris-quick.xml

如: cooliris-quick-picasa.xml

上傳!再新貼一段提供的代碼並修改路徑!以支援 Picasa 喔!

此貼法會在 Cooliris 介面下方的 jump to page 找不到圖片!
(哈哈!!因為只是指向原圖並沒貼上原圖啊!!)

 

另外! Picasa 3：從 Google 免費下載官方正體中文版 Frank 推薦喔!!

 

此目的是要讓圖片直接在 Cooliris 華麗介面下顯示原圖!而不透過 Picasa 頁面!

 

2009-01-01 更新!若有不足日後補充!

---

二.Picasa 縮圖連結內嵌貼圖1

說明:

這只是一般的貼縮圖連原圖

當我們要嘗試連結 Picasa 原圖時點擊後會出現 404 Not Found 的頁面
(沒有出現 404 !?重新整理就出現啦!)

所以 Picasa 原圖並不支援外連

(原圖不支援外連在"三."有另外解決方法!)

但在 Cooliris 下是可以顯示原圖的!

 

何謂 Picasa 的原圖!?

在圖片網址中檔名前面的/沒有如: s400,s800,s...等

舉個例子:

這是原圖
(JPEG 圖片，1024x768 像素)
http://lh3.ggpht.com/_lJoh1q4jIRo/SVaVjPvAwOI/AAAAAAAAAO0/_cVnVyjy2GA/xmas_0022-1024.jpg

這是縮圖
(JPEG 圖片，400x300 像素)
http://lh3.ggpht.com/_lJoh1q4jIRo/SVaVjPvAwOI/AAAAAAAAAO0/_cVnVyjy2GA/s400/xmas_0022-1024.jpg

 

Frank 順道一提!

若想直接這樣顯示原圖你可以用 Firefox 的擴充套件 RefControl

來使點擊看圖顯示原圖

方法:

將圖片網址的 ggpht.com 送出為 http://picasaweb.google.com 就成了!!

注意!這方式只有自己看的到!!其他閱讀者是看不到的!!

除非閱讀者有著相同的配置與設定
(哇勒!這樣的貼圖是不是很廢呢!!)

至於 RefControl 用在哪裡呢!?

在圖片的應用上可以針對每個網站送出想要的 HTTP Referer
(呵呵!!披著羊皮的狼!這個夠XX了吧~~!)

比如 RSS 訂閱或連結了相簿等禁止外連的圖片可用它來顯示!

 

2008-12-30 更新!若有不足日後補充!

---

三.Picasa 縮圖連結內嵌貼圖2

說明:

為了解決原圖不支援外連

我們可以在 Picasa 的圖片網址上做修改

前面提過必須不能是原圖 或長寬大於 800 的縮圖

所以我們可以在檔名前加上想要的縮圖尺寸!!

如:

http://***/s104/檔名.jpg -為縮圖

http://***/s800/檔名.jpg -為連結的大圖

如此就能正常的連結圖片囉!

雖然不是原圖大小!但也是大圖!!

 

加料

這是加料的原圖
(JPEG 圖片，1024x768 像素)
http://lh3.ggpht.com/_lJoh1q4jIRo/SVaVjPvAwOI/AAAAAAAAAO0/_cVnVyjy2GA/-h/xmas_0022-1024.jpg

這是加料的縮圖
(JPEG 圖片，912x684 像素)
http://lh3.ggpht.com/_lJoh1q4jIRo/SVaVjPvAwOI/AAAAAAAAAO0/_cVnVyjy2GA/s912-h/xmas_0022-1024.jpg

加料就是在圖片網址中檔名前面的/加上"-h"

這樣能讓大於 800 像素或原圖直接顯示喔!!

但在 Frank 後面要講到的 Lytebox 上是不能用"-h"來顯示原圖的!!

 

縮圖尺寸列表:

不支援外連
(需加上"-h"使圖片能顯示)

s1600

s1440

s1280

s1152

s1024

s912

支援外連

s800

s720

s640

s576

s512

s400

s320

s288

s220

s200

s160

s150

s144

s128

s110

s104

s94

s72

s64

s48

s32

此目的是要讓縮略圖片連結到更大的圖片!

 

2009-01-01 更新!若有不足日後補充!

---

四.Picasa 正統縮圖連結內嵌貼圖1

寄件者 Picasa 網路相簿測試文章用圖

寄件者 Picasa 網路相簿測試文章用圖

寄件者 Picasa 網路相簿測試文章用圖

說明:

這是正統 Picasa 外連示範

同樣支援 Cooliris 原圖展示!!

 

2008-12-30 更新!若有不足日後補充!

---

五.Picasa 正統縮圖連結內嵌貼圖2

說明:

這也是正統 Picasa 外連示範(隱藏相簿連結)

也是同樣支援 Cooliris 原圖展示!!

 

2008-12-30 更新!若有不足日後補充!

---

六.Picasa+Lytebox 縮圖連結內嵌貼圖1

說明:

Lytebox - Home

這是 Frank 近來文章最常用的貼圖方式

雖然這段示範有點...!不過 Frank 還是說明一下囉!

如果是為了要讓 Lytebox 顯示 Picasa 的原圖連結

這裡相同會遇到"二."相同的情形!

所以不透過 Picasa 頁面要來顯示 Picasa 的原圖

必須用 Cooliris 或加上 "-h"來連結囉!!

另外 Lytebox 上是不能用"-h"來顯示原圖的!!
(為了不影響 Lytebox 瀏覽的連續性!Frank 將原圖連結改了!不影響 Cooliris 瀏覽!嘻嘻!!)

用 Lytebox 來正確顯示 Picasa 的圖 Frank 會在 "七."做完整的示範!

也一併將 Lytebox 的設置說明補上喔!

 

2009-01-01 更新!若有不足日後補充!

---

七.Picasa+Lytebox 縮圖連結內嵌貼圖2

說明:

直接將連結的圖片網址使用 s800 以下就 OK 囉!!

這應該是 Picasa + Lytebox + Cooliris 終極貼圖法囉!!
(對 Frank 來說!!或~或~~!)

 

Lytebox 設置

Lytebox 的設置說起來會多一些

Frank 認為 shutter 在 Lytebox3：Good for Nothing：Xuite日誌 已經寫的很詳細了!

Frank 這裡就不在墬述囉!!請移動腳步喔!!

 

new!!

有網友反映整個設定上還有些不清楚!

Frank 將之詳細的寫了出來!

希望對各位有幫助!!

影片 網頁 圖片 幻燈片展示特效 Lytebox 安裝完全手冊!! @ Frank的雜記 :: Xuite日誌

 

若有不足日後補充!

-更新(2009/12/7 - 上午 09:26)

---

八.附錄-修改 cooliris-quick.xml 的支援

這裡 Fank 要說的是要如何使自己網頁的圖片全數支援 Cooliris

現在我們了解 cooliris-quick.xml 裡的圖片網址 src(縮圖) 與 dst(展示)

就是對應 Cooliris 圖片特效的關鍵

如果網頁中的圖片來源是單一的且另有相同的縮圖網址

那恭喜你!可在 Cooliris 的設定頁中完成所有的圖片支援!!

但如果網頁中與 Frank 的網誌一樣有許多不同來源的圖片網址

那就必須做些新增或修改的動作了!!

最簡單的方式就是將多個關鍵網址用"()"包起來並用"|"隔開再利用變數".*" 或 ".+?"來替代!

做個比方:

XML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <cooliris-quick version="1.0"> <src>^http\:\/\/(farm.*|.*imageshack.*|.*myweb.*)\.(.*)$</src> <dst>http://{1}.{2}</dst> </cooliris-quick>

如此就可以支援更多的圖片網址囉!

這樣有個缺點就是不能一一設定每個圖片的縮圖與原圖連結!
(或許有方法!?但 Frank 還沒學會!)

 

再來另一方式是能一一設定每個圖片的縮圖與原圖連結

就是前面提到的直接再上傳另外不同名指定網址的.xml

再新增貼上對應的代碼來支援囉!!

若想多了解!

建議多設定幾個不同的 .xml 下載打開來研究研究喔!!

祝各位欣賞愉快囉!!

2009-01-01 更新!

2009-11-04 更新!!再度支援 Cooliris 測試!!

若有不足日後補充!