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>