GLightbox是一款支持移动手机的纯js lightbox插件。GLightbox可以支持图片,视频,内联内容和iframes等,非常强大。
使用方法
在页面中引入glightbox.css和glightbox.js文件。
<link href="glightbox.css" rel="stylesheet"> <script src="glightbox.js" type="text/javascript"></script>
HTML结构
使用时,可以在页面中先放置一组缩略图,通过点击缩略图来弹出lightbox。例如:
<ul class="box-container three-cols"> <li class="box"> <a href="demo/img/large/gm1.jpg" class="glightbox"> <img src="demo/img/small/gm1.jpg"> </a> </li> <li class="box"> <a href="demo/img/large/gm2.jpg" class="glightbox"> <img src="demo/img/small/gm2.jpg" alt="image"> </a> </li> <li class="box"> <a href="demo/img/large/gm3.jpg" class="glightbox manuelin"> <img src="demo/img/small/gm3.jpg" alt="image"> </a> </li> <li class="box"> <a href="demo/img/large/gm4.jpg" class="glightbox"> <img src="demo/img/small/gm4.jpg" alt="image"> </a> </li> </ul>
初始化插件
在页面DOM元素加载完毕之后,可以通过GLightbox()
方法来完成对该Lightbox插件的初始化。默认带glightbox
class的元素在点击后会弹出lightbox。
var lightbox = GLightbox();
配置参数
GLightbox插件的可用配置参数如下:
参数 | 描述 | 默认值 |
selector | lightbox选择器。 | glightbox |
skin | lightbox的皮肤名称。它会为lightbox添加一个class类,你可以通过这个class类来添加自己的样式。 | clean |
openEffect | lightbox打开时的动画效果。可选值有:zoomIn, fade, zoom。 | zoomIn |
closeEffect | lightbox关闭时的动画效果。可选值有:zoomOut, fade, zoom。 | zoomOut |
slideEffect | lightbox切换时的动画效果。可选值有:fade, slide, zoom。 | slide |
moreText | 在移动设备上的描述文本。 | "See more" |
closeButton | 是否显示关闭按钮。 | true |
startAt | lightbox初始化时显示哪个图片或其它内容。 | 0 |
width | 内联内容或 iframes 的宽度。 | 900 |
height | 内联内容或 iframes 的高度。 | 506 |
videosWidth | 视频的宽度。 | 900 |
videosHeightDefault | 视频的高度。 | 506 |
descPosition | lightbox描述信息的位置。 | bottom |
loopAtEnd | 是否在终点结束循环。 | false |
onOpen | lightbox打开时的回调函数。 | null |
onClose | lightbox关闭时的回调函数。 | null |
beforeSlideChange | 在lightbox切换前触发的回调函数。 beforeSlideChange: function(prevSlide, slide){console.log(slide);} |
null |
afterSlideChange | 在lightbox切换后触发的回调函数。 afterSlideChange: function(prevSlide, activeSlide){console.log(activeSlide);} |
null |
beforeSlideLoad | 在lightbox加载完成前触发的回调函数。 beforeSlideLoad: function(slide, data){console.log(slide);} |
null |
afterSlideLoad | 在lightbox加载完成后触发的回调函数。 afterSlideLoad: function(slide, data){console.log(slide);} |
|
autoplayVideos | 视频在打开时自动播放? | true |
jwplayer | JW Player的配置。参考下面的JW Player配置。 | 对象 |
vimeo | vimeo的配置,参考下面的vimeo视频配置。 | 对象 |
youtube | youtube的配置,参考下面的youtube视频配置。 | 对象 |
JW Player配置:
jwplayer: { api: "url to jwplayer js file", licenseKey: "your jwplayer license", params: { width: '100%', aspectratio: '16:9', stretching: 'uniform', ..... } }
vimeo视频配置:
vimeo: { api: "https://player.vimeo.com/api/player.js", params: { api: 1, title: 0, byline: 0, ..... } }
youtube视频配置:
youtube: { api: "https://www.youtube.com/iframe_api", params: { enablejsapi: 1, showinfo: 0, ..... } }
方法
GLightbox lightbox插件的可用API方法有:
var myLightbox = GLightbox({ 'selector': 'glightbox', ...... }); // 跳转到指定的slide myLightbox.goToSlide(2); // 前一个slide myLightbox.prevSlide(); // 下一个slide myLightbox.nextSlide(); //获取当前激活的slide。它会返回当前激活的slide节点。 myLightbox.getActiveSlide(); // 关闭 lightbox myLightbox.close();
浏览器兼容
GLightbox插件可以在任何支持Flexbox的浏览器中正常工作。
- Safari
- Mobile Safari
- Opera
- Chrome
- Edge
- Firefox
- Internet Explorer 11
GLightbox lightbox插件的github地址为:https://github.com/mcstudios/glightbox
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!