Venobox

Venobox 是一个简洁的 jQuery 弹窗插件，可以用于显示图片、视频、网页等内容。它易于使用，可以自定义样式和选项。Venobox 还支持响应式设计并支持移动设备。

开始使用

在 HTML 中添加以下代码引入 Venobox：

<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="venobox/venobox.min.js"></script>

在 HTML 中添加以下代码创建一个弹窗：

<a class="venobox" data-gall="gallery1" href="image.jpg"><img src="thumbnail.jpg" alt="Image" /></a>

在 JavaScript 中添加以下代码初始化 Venobox：

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

选项

Venobox 提供了以下选项：

$('.venobox').venobox({
    framewidth: '',           // 弹窗宽度
    frameheight: '',          // 弹窗高度
    border: '',               // 弹窗边框大小
    bgcolor: '#fff',          // 背景颜色
    titleattr: 'data-title',  // 显示标题的属性名
    numeratio: false,         // 是否显示图片数量
    infinigall: false,        // 是否从最后一张链接到第一张
    share: []                 // 要显示的分享按钮
});

方法

Venobox 提供了以下方法：

$('.venobox').venobox();           // 初始化
$('.venobox').venobox('destroy');  // 取消初始化
$('.venobox').trigger('next');     // 显示下一张图片
$('.venobox').trigger('prev');     // 显示上一张图片

示例

可以从 Venobox 的官方网站查看 Venobox 的各种示例：http://lab.veno.it/venobox/