2010
Dec
22

這個燈箱共有四種效果,分別是圖片,影片,純文字與ifrane,下列是範例與可以修改的屬性。

功能 圖片燈箱效果 iframe連結燈箱效果 純文字燈箱效果 影片燈箱效果
寬度 widthIframe widthText widthText widthVideo
高度 heightIframe
與上方的間距 topStart

1.圖片燈箱效果

圖片燈箱語法範例 -預覽結果

  • 需要的JS檔案有:vjUI_Lightbox.js
  • 需要的CSS檔案有:vjUI_Lightbox.css
  • class名稱設定為: lightbox-image ,如<a class="lightbox-image"></a>
Example
  1. <a href="demo.jpg" class="lightbox-image" sn="Coffee 001" title="焦糖拿鐵">圖片燈箱效果</a>
  2. <script>
  3. var s=new vjUI_LightBox();
  4. </script>
  5.  

2.iframe連結燈箱效果

  • class名稱設定為:lightbox-iframe,如<a class="lightbox-iframe"></a>

iframe連結燈箱語法範例 -預覽結果

Example
  1. <a href="demo.jpg" class="lightbox-image" sn="Coffee 001" title="焦糖拿鐵">圖片燈箱效果</a>
  2. <script>
  3. var s=new vjUI_LightBox();
  4. </script>

3.純文字燈箱效果

  • class名稱設定為:lightbox-href,如<a class="lightbox-href"></a>

純文字燈箱語法範例-預覽結果

Example
  1. <a href="pop.html" class="lightbox-href">純文字燈箱效果</a>
  2. <script>
  3. var s=new vjUI_LightBox();
  4. </script>

4.影片燈箱效果

  • 需要的JS檔案有:vjUI_Lightbox.js
  • 需要的CSS檔案有:vjUI_Lightbox.css, swfobject.js
  • class名稱設定為: lightbox-video ,如<a class="lightbox-video"></a>

純文字燈箱語法範例-預覽結果

Example
  1. <a href="http://www.youtube.com/v/qtzjzMsJiO8" class="lightbox-video">影片燈箱效果</a>
  2. <script>
  3. var s=new vjUI_LightBox();
  4. </script>

Source Code 下載


目前回應 Comments(1 comments)

  • keyjus 2014/01/10

    圖片燈箱效果,測試上出上出現問題,沒有反應,好像 vjUI_Lightbox.css 有缺漏,請協助,謝謝!

    Reply

    Admin

    文章最後已附上 Source Code,請自行下載。

回應 (Leave a comment)