很多時候我們需要實作點擊彈出一個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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294727.html
標籤：其他