jQuery lightbox插件ViewBox

当前位置:主页 > jQuery库 > Lightbox和对话框 > jQuery lightbox插件ViewBox
jQuery lightbox插件ViewBox
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-09-02
    阅读:
麦子学院
简要教程

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

下一篇:没有了

网友评论