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