支持移动手机的纯js lightbox插件GLightbox_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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();