支持移动手机的纯js lightbox插件GLightbox

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插件的可用配置参数如下：

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