VenoBox jQuery插件使用教程

很多时候我们需要实现点击弹出一个popup窗口，显示图片、视频、Iframe页面等等。

使用VenoBox插件能够快速帮我们去实现效果，用起来也相当的舒服方便。

VenoBox是一个响应的jQuery灯箱插件，适用于图片，内嵌的内容， iFrame中，百度地图，谷歌地图， Ajax请求，或是Vimeo和YouTube视频。当然如果想要弹出播放Mp4视频也是可以的。

以下是使用方式：

1、必要的依赖

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2、引入VenoBox插件的css和js文件

<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>

 初始化插件

$(document).ready(function(){
    $('.venobox').venobox(); 
});

自定义设置

$('.venobox_custom').venobox({
    framewidth : '400px',                            // default: '' 设置弹窗的宽度
    frameheight: '300px',                            // default: '' 设置弹窗的高度
    border     : '10px',                             // default: '0' 边框
    bgcolor    : '#5dff5e',                          // default: '#fff' 背景色
    titleattr  : 'data-title',                       // default: 'title' 标题
    numeratio  : true,                               // default: false 
    infinigall : true,                               // default: false
    share      : ['facebook', 'twitter', 'download'] // default: []
});

3、实现效果

弹出图片

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>

弹出Iframe

<a class="venobox_custom" data-vbtype="iframe" href="http://example.com/">open iFrame</a>

弹出播放Mp4的窗口

<a class="play-btn venobox" data-vbtype="iframe" href="xxxx.mp4"></a>

弹出Gallery

<a class="venobox" data-gall="myGallery" href="image01-big.jpg"><img src="image01-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image02-big.jpg"><img src="image02-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image03-big.jpg"><img src="image03-small.jpg" /></a>

更多功能可查看官方文档

http://veno.es/venobox/