jquery灯箱插件lightgallery.js
  • 分享到微信朋友圈
    X
立即下载 查看演示

lightGallery 是一个轻量级、优雅、响应式、移动设备友好的 jQuery 插件，用于在全屏 lightbox 中显示图像/视频 画廊，并带有 CSS3 过渡效果。

参数说明

  • mode:'slide',//过渡动画类型

  • speed: 1000,//切换速度

  • loop: false,//是否循环播放

  • auto: false,//是否启用幻灯片放映模式。

  • pause: 4000,//幻灯片放映模式下转换之间的延迟（以毫秒为单位）。

  • escKey:true,//当用户按“Esc”时是否应关闭lightGallery。

  • rel:false,//如果存在"data-rel"，是否启用

  • thumbnail: true,//是否显示显示缩略图的按钮。

  • caption:false,//启用图像标题

  • desc:false,//启用图像内容

  • controls:true,//是否显示上一页/下一页按钮。

  • mobileSrc: false,//如果存在"data-responsive-src"，是否启用应用与手机端

  • mobileSrcMaxWidth :640,//要加载的替代图像的最大屏幕分辨率。

  • swipeThreshold: 50,//用户滑动多远才能看到下一个/上一个图像（像素）。

  • vimeoColor : 'CCCCCC',//Vimeo视频播放器主题颜色

  • videoAutoplay:true,//是否启用视频自动播放选项。

  • videoMaxWidth:855,//限制视频最大宽度（像素）。

js初始化

<script>
    $(document).ready(function () {
        $("#lightGallery").lightGallery({
            mode: "fade",
            speed: 800,
            caption: true,
            desc: true,
            mobileSrc: true
        });
</script>