Horn Network

Lightbox 效果已經有許多現成的方法了，Blogspot界有hack在Wordpress界裡也有Plugin可以套用。但是今天要介紹的可不單單只是show show圖片而已，它還能播放Youtube的影片呢！

效果：

請點 許願池的希臘少女

說明：

這個方法主要是改造由Giuseppe Argento製作的外掛程式(plugin) – Lightbox 2

資料來源：http://wordpress.org/extend/plugins/lightbox-2-wordpress-plugin/
This plugin includes the new Lightbox JS v2.04 javascript written by Lokesh Dhakar and got transformed into a WordPress Plugin by me. Use the title attribute if you want to show a caption. Plugin Homepage

並參考Javascritp套件 – Videobox: Lightbox for videos

資料來源：http://videobox-lb.sourceforge.net/
Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox‘s code. It’s written for the wonderful mootools library. And used swfobject to embed flash.

改寫成prototype適用的方法並加入swfobject處理Youtube影片播放。

安裝：

1. 下載外掛程式 Lightbox 2，並將檔案解壓縮（如C:\WP\Plugins）。
2. 下載 swfobject，取出其中的 swfobject.js 複製到 C:\WP\Plugins\lightbox-2-wordpress-plugin\lightbox\js
3. 下載經過修改的 lightbox2.js 更名為 lightbox.js 再複製到 C:\WP\Plugins\lightbox-2-wordpress-plugin\lightbox\js
   或
   修改 C:\WP\Plugins\lightbox-2-wordpress-plugin\lightbox.php 將 其中的 lightbox.js 改成 lightbox2.js
4. 將C:\WP\Plugins\lightbox-2-wordpress-plugin 整個目錄上傳到網站上的/wp-content/plugins/
5. 進入管理介面，啟用(activate)外掛程式Lightbox 2。

PS：如果嫌麻煩這裡有打包好的懶人包，請下載使用。

用法：

• 在要使用這個效果的連結加上 rel=”lightbox”，程式會判斷是一般圖片或是Youtube的影片。
  加上 title=”說明”會在lightbox左下角出現說明。

  <a title="許願池的希臘少女" href="http://tw.youtube.com/watch?v=3gluvKTtTNw" rel="lightbox">許願池的希臘少女</a>

  

Filed under:
Hack, Plugin, WordPress, 檔案下載 by klcintw