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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!