想不到真的有人來信跟我要這個東西, 所以我就直接放出來好了, 其實只是將原本的 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]