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 下载

网页好读版