GLightbox - 支持移动手机lightbox插件

PetitQ Lightbox/弹窗 2018-10-26 3.08K 0 0

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 lightbox 插件的 github 地址为：https://github.com/mcstudios/glightbox

GLightbox - 支持移动手机 lightbox 插件

已有 771 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Lightbox/弹窗

GLightbox - 支持移动手机lightbox插件

使用方法：

HTML 结构：

初始化插件：

配置参数：

方法：

GLightbox - 支持移动手机 lightbox 插件

相关文章

支持移动设备响应式lightbox图片轮播插件

ekko-lightbox - lightBox相册画廊插件

基于canvas超酷跟随鼠标粒子动画

发表回复取消回复

热销模板

Lightbox/弹窗

使用方法：

HTML 结构：

初始化插件：

配置参数：

方法：

GLightbox - 支持移动手机 lightbox 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复