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
- <a href="demo.jpg" class="lightbox-image" sn="Coffee 001" title="焦糖拿鐵">圖片燈箱效果</a>
- <script>
- var s=new vjUI_LightBox();
- </script>
2.iframe連結燈箱效果
- class名稱設定為:lightbox-iframe，如
<a class="lightbox-iframe"></a>
iframe連結燈箱語法範例 -預覽結果
Example
- <a href="demo.jpg" class="lightbox-image" sn="Coffee 001" title="焦糖拿鐵">圖片燈箱效果</a>
- <script>
- var s=new vjUI_LightBox();
- </script>
3.純文字燈箱效果
- class名稱設定為:lightbox-href，如
<a class="lightbox-href"></a>
純文字燈箱語法範例-預覽結果
Example
- <a href="pop.html" class="lightbox-href">純文字燈箱效果</a>
- <script>
- var s=new vjUI_LightBox();
- </script>
4.影片燈箱效果
- 需要的JS檔案有：vjUI_Lightbox.js
- 需要的CSS檔案有：vjUI_Lightbox.css, swfobject.js
- class名稱設定為: lightbox-video ，如
<a class="lightbox-video"></a>
純文字燈箱語法範例-預覽結果
Example
- <a href="http://www.youtube.com/v/qtzjzMsJiO8" class="lightbox-video">影片燈箱效果</a>
- <script>
- var s=new vjUI_LightBox();
- </script>