jQuery lightbox插件ViewBox

ViewBox是一款jQuery lightbox插件。ViewBox可以显示图片，也可以显示HTML内容。它使用简单，是一款不错的jquery Lightbox插件。

使用方法

在页面中引入viewbox.css，jquery和jquery.viewbox.min.js文件。

<link rel="stylesheet" type="text/css" href="css/viewbox.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.viewbox.min.js"></script>
                

HTML结构

把viewbox作为图片Lightbox插件来使用，它的基本HTML结构如下：

<a href="images/i1.jpg" class="image-link">
  <img src="images/i1-thumb.jpg" alt="">
</a>
<a href="images/i2.jpg" class="image-link" title="Image Title">
  <img src="images/i2-thumb.jpg" alt="">
</a>
<a href="images/i3.jpg" class="image-link">
  <img src="images/i3-thumb.jpg" alt="">
</a>
                

如果要在Lightbox中显示HTML内容，它的HTML结构如下：

<p><a href="#popup" class="popup-link">Open popup window</a></p>
<p><button type="button" class="popup-open-button">Open popup window</button></p>

<!-- Use invisible wraper to hide popup window content -->
<div style="display:none;">
  <div id="popup">
    <h3>Popup content</h3>
    <p>Some text for popup window.</p>
    <p><button type="button" class="close-button">Close</button></p>
  </div>
</div>                 
                

初始化插件

viewbox作为图片Lightbox插件来使用时，通过下面的js代码来进行初始化：

$(function(){
  $('.image-link').viewbox();
});                  
                

要在Lightbox中显示HTML内容，通过下面的js代码来进行初始化：

$(function(){
  var vb = $('.popup-link').viewbox();
  
  //optional: custom close button
  $('.close-button').click(function(){
    vb.trigger('viewbox.close');
  });
});
//或者
$(function(){
  var vb = $('#popup').viewbox();
  
  $('.popup-open-button').click(function(){
    vb.trigger('viewbox.open');
  });
});              
                

配置参数

viewbox插件默认的配置参数如下：

$(function(){
  $('.image-link').viewbox({
    setTitle: true,
    margin: 20,
    resizeDuration: 300,
    openDuration: 200,
    closeDuration: 200,
    closeButton: true,
    navButtons: true,
    closeOnSideClick: true,
    nextOnContentClick: false,
    useGestures: true
  });
});                  
                

ViewBox-jQuery lightbox插件的github地址为：https://github.com/pgooood/viewbox

相关插件

jQuery侧边栏式lightbox图片画廊插件

jQuery带炫酷轮播图效果的Lightbox弹出层插件

纯CSS3 lightbox插件

jQuery Lightbox和弹出层插件flashy