Lightbox 2.0

玩玩Lightbox 2.0

Lightbox 2.0官網

如何使用:

第一步 - 設定

  1. Lightbox v2.0 使用了 Prototype Framework 和 Scriptaculous Effects Library. 你需要先將這三個Javascript檔案設定在你網頁的header裡.
    <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>
    
  2. 然後再將Lightbox的CSS檔也include進來 (或是將Lightbox的styles加入你現有的CSS檔中).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
  3. 檢查CSS中prev.gif,next.gif的路徑是否正確,以及lightbox.js中loading.gifclose.gif的路徑是否沒問題.

第二步 - 啟動

  1. 在你要觸發lightbox效果的link上加上rel="lightbox"的屬性.例如:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    
    附註: 使如果你要顯示標題的話可以使用title的屬性來設定.
  2. 如果你有一個照片集要顯示的話,你可以在rel的屬性中加上群組的名稱. 例如:
    <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>