ekko-lightbox.js是一款基于Bootstrap3的jQuery lightBox图片画廊插件。该lightBox插件基于Bootstrap的模态窗口插件来制作，可以显示图片，HTML内容，视频等，也可以远程加载内容。

使用方法

使用该lightBox插件需要引入Bootstrap3的相关依赖文件，以及jQuery和ekko-lightbox.js、ekko-lightbox.css文件。

<link type="text/css" rel="stylesheet" href="css/ekko-lightbox.css" />
<script src="js/jquery.min.js"></script>
<script src="js/ekko-lightbox.js"></script>
HTML结构

该lightbox插件的基本HTML结构如下：

<a href="img/1.jpg" data-toggle="lightbox" 
                    data-title="A random title" 
                    data-footer="A custom footer text">
    <img src="img/1.jpg" class="img-responsive">
</a>
初始化插件

你可以像上面那样直接在HTML中使用data-*属性来初始化lightbox插件。也可以通过JS的方式来初始化。

<a href="someurl" id="mylink">Open lightbox</a>
$('#mylink').ekkoLightbox(options);

例子中初始化的方式如下：

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

配置参数

你可以你对象的方式传入下面的参数，或者通过$.fn.ekkoLightbox.defaults来设置默认参数。

参数 类型 默认值 描述 data-*
remote string 远程加载内容 data-remote="http://www...."
gallery string 画廊组元素 data-gallery="galleryname"
gallery_parent_selector string document.body 如果你单个页面有多个图片画廊，该参数会在匹配的选择器中限制图片画廊中的项 data-parent="any valid selector"
left_arrow_class string .glyphicon .glyphicon-chevron-left 左箭头的CSS class类
right_arrow_class string .glyphicon .glyphicon-chevron-right 右箭头的CSS class类
type string 强制lightbox为图片/YouTube模式 data-type="(image|youtube|vimeo)"
width (videos only; height is calculated by ratio) integer 强制宽度 data-width="[0-9]+"
always_show_close boolean true 是否总是显示关闭按钮
onNavigate callable false 当向左或向右导航时触发，第一个参数为方向
loadingMessage string Loading... loading的文字信息
no_related boolean false 在当前视频播放完成后不显示相关视频 data-norelated

事件

事件 描述
onContentLoaded 在内容 (image/video/remote page etc)被完全加载后触发
onNavigate 在画廊中导航前触发
onShow/onShown/onHide/onHidden 继承自bootstrap modal

ekko-lightbox插件的github地址为：https://github.com/ashleydw/lightbox