Lightbox 2.0

Lightbox 其實還滿常見的，安裝也很簡單(我這程式白木都會用)


應用範例 >>

原文 >>



步驟


Step1.


下載檔案後解壓縮，會看到3個資料夾(css / images /js)及一個index.html(教學文件)

css / images /js 這三個資料夾請放到你的網站根目錄下

---

Step2.


把以下三段script放在head之間


<script type="text/javascript" src="js/prototype.js"> </script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

---

Step3.


加入此段css連結

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

---

Step4.


應用>>

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image
#1</a>


如果你希望可以跑下一張上一張，可以加上中括號及群組名稱，ex:[群組名稱]>

如下 <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>



如果你想要在下方的圖片說明加上連結，應用如下：

<a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a>




重點就是把連結的語法轉成語法然後寫在title裡面~
ENJOY~

備註：
多年以後，已經有其他模組更棒了~可以放flash、youtube影音、連iframe都可以放哩!
所以大家記得去找新的唷! 不要傻傻的用這支唷!

facebook討論