2008年4月23日

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討論

0 意見:

 

One Design Copyright © 2009 BeMagazine Blogger Template is Designed by Blogger Template
In Collaboration with fifa