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

使用方法

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

HTML结构

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

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

Open popup window
Open popup window



  

    
Popup content
    
Some text for popup window.
    
Close
  
                 
                

初始化插件

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