前言： VenoBox是一款十分优秀的综合性响应试灯箱插件，不仅具备多种显示效果，而且使用也非常简单，VenoBox这款插件跟我之前文章介绍过的一款灯箱插件Magnific Popup十分类似，多具备加载图片、内联内容、iFrames、谷歌地图、ajax、youtube视频、当然我们国内的优酷也可以。
VenoBox还可以让你*的设置iFrames的宽度和高度，后面会讲到，之前说到VenoBox是响应试的，它可以自动的检测出图片的宽高度、如果超出屏幕的宽高度，它会进行一定程度的等比例缩放。
例子
图片画廊（你可以使用键盘左右键进行切换）
用法：添加VenoBox提供的相应的css样式和js脚本，当然jquery库不可或缺。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" /> <script type="text/javascript" src="venobox/venobox.min.js"></script>
插入一张或者多张图片可以这么写
<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
同一组别需在a标签内加上data-gall这个属性
<a class="venobox" href="images/pic1-big.png" data-gall="gall1" title="图片标题1"><img src="images/pic1.jpg" alt="image alt"/></a> <a class="venobox" href="images/pic2-big.png" data-gall="gall1" title="图片标题2"><img src="images/pic2.jpg" alt="image alt"/></a> <a class="venobox" href="images/pic3-big.jpg" data-gall="gall1" title="图片标题3"><img src="images/pic3.jpg" alt="image alt"/></a> <a class="venobox" href="images/pic4-big.jpg" data-gall="gall1" title="图片标题4"><img src="images/pic4.jpg" alt="image alt"/></a>
在iframe内插入网页,加入data-type属性
<a class="venobox_custom" data-type="iframe" href="http://www.dglives.com">open iFrame</a>
嵌入视频
<a class="venobox_custom" data-type="iframe" href="video url">open iFrame</a>
ajax
<a class="venobox_custom" data-type="iframe" href="http://www.dglives.com/demo/ajax_content.html">open iFrame</a>
初始化插件
$(document).ready(function(){ /* default settings */ $(‘.venobox‘).venobox(); /* open content with custom settings */ $(‘.venobox_custom‘).venobox({ framewidth: ‘300px‘, frameheight: ‘250px‘, border: ‘6px‘, bordercolor: ‘#ba7c36‘, numeratio: true }); /* auto-open #firstlink on page load */ $("#firstlink").venobox().trigger(‘click‘); });
补充设置 通过JavaScript设置淡入效果
numeratio: default: false 显示画廊中所包含的图片总数以及当前位置，默认情况下是关闭的 border: default: ‘0px‘ 设置显示边框粗细程度 bgcolor: default: ‘#ffffff‘ 设置弹窗背景 framewidth: 通过 class属性 .venoframe 设置响应试弹窗宽度。 frameheight: 通过 class属性 .venoframe 设置响应试弹窗高度。