人靠衣装,机靠壳装

支持移动手机的lightbox插件GLightbox

2018-11-24 09:41 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

支持移动手机的lightbox插件GLightbox.jpg


支持移动手机的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插件的可用配置参数如下:

参数描述默认值
selectorlightbox选择器。glightbox
skinlightbox的皮肤名称。它会为lightbox添加一个class类,你可以通过这个class类来添加自己的样式。clean
openEffectlightbox打开时的动画效果。可选值有:zoomIn, fade, zoom。zoomIn
closeEffectlightbox关闭时的动画效果。可选值有:zoomOut, fade, zoom。zoomOut
slideEffectlightbox切换时的动画效果。可选值有:fade, slide, zoom。slide
moreText在移动设备上的描述文本。"See more"
closeButton是否显示关闭按钮。true
startAtlightbox初始化时显示哪个图片或其它内容。0
width内联内容或 iframes 的宽度。900
height内联内容或 iframes 的高度。506
videosWidth视频的宽度。900
videosHeightDefault视频的高度。506
descPositionlightbox描述信息的位置。bottom
loopAtEnd是否在终点结束循环。false
onOpenlightbox打开时的回调函数。null
onCloselightbox关闭时的回调函数。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
jwplayerJW Player的配置。参考下面的JW Player配置。对象
vimeovimeo的配置,参考下面的vimeo视频配置。对象
youtubeyoutube的配置,参考下面的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


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码