响应试jquery灯箱插件VenoBox

前言： 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>

demo演示

在iframe内插入网页,加入data-type属性

<a class="venobox_custom" data-type="iframe" href="http://www.dglives.com">open iFrame</a>

demo演示

嵌入视频

<a class="venobox_custom" data-type="iframe" href="video url">open iFrame</a>

demo演示

ajax

<a class="venobox_custom" data-type="iframe" href="http://www.dglives.com/demo/ajax_content.html">open iFrame</a>

demo演示

初始化插件

$(document).ready(function(){
 
    /* default settings */
    $('.venobox').venobox();
 
    /* open content with custom settings */
    $('.venobox_custom').venobox({
        frame '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' 设置弹窗背景
 
frame 通过 class属性 .venoframe 设置响应试弹窗宽度。
 
frameheight: 通过 class属性 .venoframe 设置响应试弹窗高度。

下载地址