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

当前位置:主页 > jQuery库 > Lightbox和对话框 > 支持移动手机的纯js lightbox插件GLightbox
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
支持移动手机的纯js lightbox插件GLightbox
分享:

    插件介绍

    GLightbox是一款支持移动手机的纯js lightbox插件。GLightbox可以支持图片,视频,内联内容和iframes等,非常强大。

    浏览器兼容性

    浏览器兼容性
    时间:2017-12-05
    阅读:
简要教程

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

网友评论