全功能响应式灯箱插件 VenoBox

当前位置：首页 > 网页特效 > 幻灯片 > 全功能响应式灯箱插件 VenoBox

全功能响应式灯箱插件 VenoBox

源码大小：79.57KB
所需积分：1积分
源码编号：19JP-3676
浏览次数：754次
最后更新：2023年07月10日
所属栏目：幻灯片

我要下载

加入收藏

本站默认解压密码：19jp.com 或 19jp_com

简介

VenoBox是一个响应迅速、移动友好的JavaScript灯箱插件，用于覆盖当前页面上的任何html元素（如图像、iframe、视频等）。

特征：

支持图像和图像灯箱库（可以使用键盘箭头进行导航）。
支持Ajax和内联内容。
支持Youtube、Vimeo、HTML5视频。
支持Iframes和谷歌地图。
可访问且支持触摸。
如果重叠元素的高度高于窗口，则提供滚动条。
分享和下载按钮：Facebook、Twitter、LinkedIn、Pinterest。
可与jQuery和Vanilla JavaScript配合使用。

基本用法：

1.包括所需内容静脉箱.css和venobox.js在您的网页上。

<!-- Required For jQuery Version Only -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- venobox Plugin files -->
<link href="/path/to/venobox/venobox.css" rel="stylesheet" />
<script src="/path/to/venobox/venobox.js"></script>

2.初始化插件，我们就可以开始了。

// jQuery Version
$('.venobox').venobox({
  // settings here
});

// Vanilla JS Version
new VenoBox();

3.从一组图像中创建一个图库灯箱。请注意，图像与数据胆属性否则，当您单击缩略图时，它只显示一个图像灯箱。

<a class="venobox" 
   data-gall="myGallery" 
   title="Image 1" 
   href="1.jpg">
   <img src="thumb.jpg" />
</a>
<a class="venobox" 
   data-gall="myGallery" 
   title="Image 2" 
   href="2.jpg">
   <img src="thumb.jpg" />
</a>
<a class="venobox" 
   data-gall="myGallery" 
   title="Image 3" 
   href="3.jpg">
   <img src="thumb.jpg" />
</a>

4.在灯箱中显示内联内容。

<!-- Trigger element -->
<a class="venobox" 
   data-gall="myGallery" 
   data-title="inline content" 
   data-vbtype="inline" 
   href="#inline-content">
   Inline Content
</a>

<!-- Inline Content -->
<div id="inline-content" style="display:none;">
  Inline Content Here
</div>

5.在灯箱中显示iframe内容。

<a class="venobox" 
   data-gall="iframe"  
   data-vbtype="iframe" 
   title="iFrame example" 
   href="https://example.com/">
   iFrame
</a>

6.在灯箱中显示AJAX内容。

<a class="venobox" 
   data-gall="iframe"  
   data-vbtype="ajax" 
   data-ratio="16x9"
   href="ajax.php">
   Ajax
</a>

7.将Youtube、Vimeo或HTML5视频嵌入灯箱。

<a class="venobox" 
   data-gall="gall-video" 
   data-autoplay="true" 
   data-vbtype="video" 
   data-ratio="4x3"
   href="http://vimeo.com/75976293">
   Vimeo
</a>

<a class="venobox" 
   data-gall="gall-video" 
   data-autoplay="true" 
   data-vbtype="video" 
   href="https://youtu.be/bS5P_LAqiVg">
   YouTube
</a>

8.您也可以在页面加载时打开灯箱中的默认项目，方法是添加#第一链接至所需的触发元件。

<a id="firstlink"
   class="venobox" 
   data-gall="myGallery" 
   title="Image 1" 
   href="1.jpg">
   <img src="thumb.jpg" />
</a>

9.设置灯箱的最大宽度。

<a class="venobox" 
   data-maxwidth="600px" 
   title="My Description" 
   href="image-big.jpg">
   Open image
 </a>

10.自定义覆盖的背景颜色。

<a class="venobox" 
   data-overlay="rgba(95,164,255,0.8)"
   title="My Description" 
   href="image-big.jpg">
   Open image
 </a>

11.配置灯箱的可用选项。

var venobox = new VenoBox({

    // Items selector
    selector: "",

    // color of navigation arrows
    // * jquery version only
    arrowsColor: '#B6B6B6',

    // same as data-autoplay
    autoplay: false, 

    // background color
    bgcolor: '#fff',

    // border
    border: '0',

    // custom CSS class
    customClass: false,

    // infinite loop
    // * vanilla JS version only
    infinigall: false,

    // max width
    // * vanilla JS version only
    maxWidth: "1200px",

    // navigation options
    // * vanilla JS version only
    navigation: true,
    navKeyboard: true,
    navTouch: true,
    navSpeed: 300,

    // show navigation number and total items in current gallery
    // * vanilla JS version only
    numeration: false,

    // background color of close button
    closeBackground: '#161617',

    // colr of close button
    closeColor: "#d2d2d2",

    // frame width/height
    // * jQuery version only
    framewidth: '',
    frameheight: '',

    // show items as a gallery
    // * jQuery version only
    gallItems: false,

    // custom controls
    // * jQuery version only
    htmlClose: '&times;',
    htmlNext: '<span>Next</span>',
    htmlPrev: '<span>Prev</span>',

    // background color of counter
    // * jQuery version only
    numerationBackground: '#161617',

    // counter color
    // * jQuery version only
    numerationColor: '#d2d2d2',

    // 'top' || 'bottom'
    // * jQuery version only
    numerationPosition: 'top', 

    // close the lightbox by clicking the background overlay
    overlayClose: true,

    // color of the background overlay
    overlayColor: 'rgba(23,23,23,0.85)',

    // show automatic popup on page load
    // * vanilla JS version only
    popup: "false",

    // '1x1' | '4x3' | '16x9' | '21x9' | 'full'
    // * vanilla JS version only
    ratio: "16x9",

    // show sharing buttons for images and videos
    // * vanilla JS version only
    share: false,

    // 'block' | 'pill' | 'transparent' | 'bar'
    // * vanilla JS version only
    shareStyle: 'bar',

    // jQuery version: 'rotating-plane' | 'double-bounce' | 'wave' | 'wandering-cubes' | 'spinner-pulse' | 'chasing-dots' | 'three-bounce' | 'circle' | 'cube-grid' | 'fading-circle' | 'folding-cube'
    // Vanilla JS version: 'plane' | 'chase' | 'bounce' | 'wave' | 'pulse' | 'flow' | 'swing' | 'circle' | 'circle-fade' | 'grid' | 'fold | 'wander'
    spinner: 'double-bounce', 

    // spinner color
    spinColor: '#d2d2d2',

    // same as data-title
    titleattr: 'title',

    // 'top' || 'bottom'
    titlePosition: 'top'

    // title background color
    // * jQuery version only
    titleBackground: '#161617',

    // title color
    // * jQuery version only
    titleColor: '#d2d2d2',

    // background color of title and share buttons
    // * vanilla JS version only
    toolsBackground: "#1C1C1C",

    // color of Title, Share buttons and gallery navigation
    // * vanilla JS version only
    toolsColor: '#d2d2d2',

});

12.回调函数。

// Vanilla JS Version
var venobox = new VenoBox({
    // Return the selected object - set return false to prevent opening
    onPreOpen: function(){ return true; }, 
    // Return: current_item, gallIndex, thenext, theprev
    onPostOpen: function(){}, 
    // Return: current_item, gallIndex, thenext, theprev - set return false to prevent closing
    onPreClose: function(){ return true; }, 
    // Return: current_item, gallIndex, thenext, theprev
    onNavComplete: function(){}, 
    // Return: newcontent
    onContentLoaded: function(){}, 
    // Return: plugin obj
    onInit: function(){}, 
});

// jQuery Version
$('.venobox').venobox({
  cb_pre_open: function(){ return true; }, 
  cb_post_open: function(){},
  cb_pre_close: function(){ return true; },
  cb_post_close: function(){},
  cb_post_resize: function(){},
  cb_after_nav: function(){},
  cb_content_loaded: function(){},
  cb_init: function(){}
});

13.API方法。

var venobox = new VenoBox();

// open a specific item
venobox.open('#my-link');

// close the lightbox
venobox.close();

// goto the next item
venobox.next(); 

// back to the prev item
venobox.prev();

// destroy the instance
venobox.destroy();

更新日志：

2022-03-08

更新：youtube noookie支持

2.0.4版（2021-12-17）

新选项：customClass
新属性：data-customclass（覆盖全局选项customclass）
新属性：数据边界（替代全局选项边界）
新增：选项比例：iFrame和视频内容的100%视口高度为“满”

2.0.3版（2021-12-13）

新增：快速图库导航

2.0.0版（2021-12-08）

用Vanilla JavaScript重写。

v1.9.4 (2021-11-17)

JS更新

预览截图

全功能响应式灯箱插件 VenoBox

相关热词： VenoBox 灯箱响应全功能插件

上一篇：带渐变/滑动/翻转转换自动幻灯片放映 cb幻灯片放映js
下一篇：jQuery中简易动态演示插件 Presentation.js

开发前端软件素材源码教程下载网站

全功能响应式灯箱插件 VenoBox

最新资源

简介

特征：

基本用法：

更新日志：

预览截图