響應試jquery燈箱插件VenoBox

前言： VenoBox是一款十分優秀的綜合性響應試燈箱插件，不只具有多種顯示效果，並且使用也很是簡單，VenoBox這款插件跟我以前文章介紹過的一款燈箱插件Magnific Popup十分相似，多具有加載圖片、內聯內容、iFrames、谷歌地圖、ajax、youtube視頻、固然咱們國內的優酷也能夠。

VenoBox還能夠讓你自由的設置iFrames的寬度和高度，後面會講到，以前說到VenoBox是響應試的，它能夠自動的檢測出圖片的寬高度、若是超出屏幕的寬高度，它會進行必定程度的等比例縮放。

例子

圖片畫廊（你能夠使用鍵盤左右鍵進行切換）

用法：添加VenoBox提供的相應的css樣式和js腳本，固然jquery庫不可或缺。

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

插入一張或者多張圖片能夠這麼寫

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

同一組別需在a標籤內加上data-gall這個屬性

<a class="venobox" href="images/pic1-big.png" data-gall="gall1" title="圖片標題1"><img src="images/pic1.jpg" alt="image alt"/></a>
<a class="venobox" href="images/pic2-big.png" data-gall="gall1" title="圖片標題2"><img src="images/pic2.jpg" alt="image alt"/></a>
<a class="venobox" href="images/pic3-big.jpg" data-gall="gall1" title="圖片標題3"><img src="images/pic3.jpg" alt="image alt"/></a>
<a class="venobox" href="images/pic4-big.jpg" data-gall="gall1" title="圖片標題4"><img src="images/pic4.jpg" alt="image alt"/></a>

demo演示

在iframe內插入網頁,加入data-type屬性

<a class="venobox_custom" data-type="iframe" href="http://www.dglives.com">open iFrame</a>

demo演示

嵌入視頻

<a class="venobox_custom" data-type="iframe" href="video url">open iFrame</a>

demo演示

ajax

<a class="venobox_custom" data-type="iframe" href="http://www.dglives.com/demo/ajax_content.html">open iFrame</a>

demo演示

初始化插件

$(document).ready(function(){
 
    /* default settings */
    $('.venobox').venobox();
 
    /* open content with custom settings */
    $('.venobox_custom').venobox({
        framewidth: '300px',
        frameheight: '250px',
        border: '6px',
        bordercolor: '#ba7c36',
        numeratio: true
    });
 
    /* auto-open #firstlink on page load */
    $("#firstlink").venobox().trigger('click');
});

補充設置 經過JavaScript設置淡入效果

numeratio: default: false 顯示畫廊中所包含的圖片總數以及當前位置，默認狀況下是關閉的
 
border: default: '0px' 設置顯示邊框粗細程度
 
bgcolor: default: '#ffffff' 設置彈窗背景
 
framewidth: 經過 class屬性 .venoframe 設置響應試彈窗寬度。
 
frameheight: 經過 class屬性 .venoframe 設置響應試彈窗高度。

下載地址