想不到真的有人來信跟我要這個東西, 所以我就直接放出來好了, 其實只是將原本的 Greybox 加了一小段很廢柴 code 而已 (我 JavaScript 能力很差)。
使用我修改的這個版本前, 建議先閱讀官方的文件, 它原本的功能都還保留著, 因此你也可以依照官方的方式來使用它。我會想要修改其實只是因為我不想在每個連結都要手動去設定 onclick 事件呼叫的方法, 所以我從 Lightbox JS得到靈感, 同樣利用 rel 來控制 Greybox 的顯示。
要注意的是, 我並沒有實作 GB_show() 相對應的 rel (因為我用不到, 我修正的方式都是以我方便使用為主), 因此有興趣的請自行實作囉!
下載連結: greybox.zip
使用說明:
- 此版本「不限定」於 WordPress 才能使用。
- 將下載回去的檔案解壓縮後, 將整個 greybox 目錄上傳到你的 Blog 或 Web 目錄下。
- 修改 Template 或網頁, 在 <head></head> 的部份加入以下程式碼 (路徑部份注意一下, 如果你有放到別的目錄要記得改)。
<link rel="stylesheet" type="text/css" href="/greybox/greybox.css" media="all" /> <script type="text/javascript" src="/greybox/prototype.js"></script> <script type="text/javascript" src="/greybox/AJS.js"></script> <script type="text/javascript" src="/greybox/greybox.js"></script> <script type="text/javascript"> var GB_IMG_DIR = "/greybox/"; </script> - 之後, 在發表文章或編輯網頁時, 在要利用 Greybox 效果開啟的連結處利用 rel 屬性來控制顯示的方式, 主要有兩種:
要顯示單一圖片請利用以下語法:
<a href="url" rel="showImage" title="單一圖片">單一圖片</a>要顯示某個頁面請利用以下語法:
<a href="url" rel="showFullScreen" title="顯示網頁">顯示網頁</a>其中 showFullScreen 及 showImage 並不分大小寫, title 屬性則是用來指定連結開啟後, Greybox 顯示的標題。
- 到上一步就完成了! 程式會在頁面載入後, 自動將用 rel 指定的連結進行 onclick 事件的設定, 這樣不但省去了一一設定 onclick 事件的麻煩, 也確保了將來 Blog 搬家後無法使用 Greybox 時瀏覽器不會出現錯誤訊息的問題。
以上, 這是個因為「懶」字而誕生的修改版, 不怕死的就拿去用吧! 哈哈!
[tags]greybox[/tags]
hello.
燈箱在ie和ff都有點不方便閱讀ㄟ
還是改回原樣吧
我應該只有在 Flickr 和 Zooomr 上的圖片會使用啦…
其它的連結並不會使用, 本文使用只是示範一下而已…
請問這可以用在 blogger.com 嗎?
要怎麼上傳至哪?
感謝了
把所有的 .js 檔的內容全部貼到 Blogger 的 Template 上,
並把所有圖檔都找個 Image Host 放的話,
我想是可以用在 Blogger 的…
只是這樣一來, Template 會長到你完全不想維護…
真神奇，
竟然看到N8.的用戶，
算了算了，
我支援到FF就已經費盡心力了。
@Aeon
你的反應和我看到時一樣… Netscape 8.1 耶…
不過, 想當初, IE 3.0 的時代, 我也是 Netscape 的愛用者….
其實我主要的 browser 是用 Fx 2.0, 偶爾會用 K-Meleon 1.02
這是特意用 K-Meleon 來留言看看它會顯示什麼 XD
@alan
原來… 是 Plugin 誤判… XD
對了, K-Meleon 好用嗎?
據說速度很快…
我就是因為它的速度而留下它來當副 browser,
用 K-Meleon 瀏覽網頁感覺上有比較快,
基本內建的功能都算不錯, 又輕便小巧,
不過我被 Fx 養大了胃口,
強大的 Add-ons 讓我養成了一些瀏覽習慣,
現在是離開了自己的 Fx 就不會上網似,
在學校用 IE 時都會在那邊按右鍵划來划去,
然後才發現這不是我的 Fx = =
用別人的 Fx 更慘, 設定不一樣,
一個不小心划錯了, 整個 wondow 都關起來.
對於沒什麼要求、沒用什麼 Add-ons 的人來說,
K-Meleon 是很不錯用的.
另外問一下, zooomr 有像 flickr 一樣
照片必須連回 photo page 的使用條款嗎?
感謝了
哈… 我也是耶…
現在沒有滑鼠手勢的瀏覽器真的是完全不想用…
另外, 我已經把 FX 弄成自己最習慣且方便的環境, 所以要換瀏覽器用還真是很不習慣咧…
不過, 最近一直聽聞 K-Meleon 的快, 所以應該還是會下載來試試吧…
至於 Zooomr 有沒有像 Flickr 一樣的條款我沒有去細看, 所以不太清楚; 不過… 它一樣是不讚成用來放非照片以外的東西就是了…
這是zooomr的第六條使用規則，英文不好，不過我想它還是要求連回網站上的
‘Hotlinked’ photos, which are images hosted on the Web Site but used on unaffiliated web pages, are allowed, but the image itself must link back to its respective page on the Web Site. BlueBridge is not responsible for ensuring that all hotlinks to the Web Site function properly.
@SZANY
感謝提供, 看來 Screenshot 又得找地方放啦… XD
我比较喜欢这种字体的风格。
仿一下CSS先！
原本的下載連結失效了, 重新上傳:
Greybox 修改版
很想試試您的修改版，但下載連結好像失效，不曉得版主可否傳一份給我，不勝感激，謝謝！！
可否給我您的修改版，連結下載已經找不到該檔案，拜讀完若有修改，我也會回寄給你
感謝您拉!!
@Sean
下載連結