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)