响应式 JavaScript 模态窗口插件,触摸滑动画廊

2.1.8 2024-04-26 12:57 UTC

README

venobox (latest) venobox (downloads)

响应式模态窗口 JavaScript 插件,触摸滑动画廊

又一个响应式灯箱插件,适合图片、内联内容、iFrames、视频。

与许多其他插件相比,VenoBox 的主要区别在于它会计算显示图片的最大宽度,并在图片高度超过窗口时保持其高度(因此在小设备上可以向下滚动内容,避免垂直微缩的图像)。

演示: https://veno.es/venobox/

快速开始

安装

此包可以使用以下方式安装

  • npm: npm install venobox
  • composer: composer require nicolafranchini/venobox

静态 HTML

下载最新的 发布版 或从 jsDelivr 获取源代码

将所需的样式表放入您的 <head> 中以加载我们的 CSS

<link rel="stylesheet" href="venobox/dist/venobox.min.css" />

在页面末尾附近包含脚本,紧接在 </body> 标签之前

<script src="venobox/dist/venobox.min.js"></script>

使用方法

插入一个或多个带有自定义类的链接

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

初始化插件,您的 VenoBox 就可以为所有选定的链接准备好了。

new VenoBox({
  selector: '.venobox'
});

文档

完整文档可在 https://veno.es/venobox/ 找到

许可:在 MIT 许可证下发布