当前位置:主页 > JavsScript库 > 图库 / 图片 >

优雅画廊灯箱组件 – GLightbox
栏目分类:图库 / 图片   发布日期:2021-08-30   浏览次数:

GLightbox 是一个用纯 JavaScript 和 CSS/CSS3 编写的简单但功能强大、适合移动设备的画廊灯箱插件。

特征:

  • 打开/关闭动画:放大、淡入淡出和缩放。

  • 内容幻灯片动画:淡入淡出、滑动、缩放。

  • 支持任何内容甚至混合内容:图像、HTML5 视频、Youtube/Vimeo 视频、iframe、内嵌内容等等。

  • 通过键盘交互完全访问。

  • 许多配置选项、回调函数和 API 方法。

使用:

将“glightbox.css”和“glightbox.js”导入到文档中。

<link href="dist/css/glightbox.css" rel="stylesheet">
<script src="dist/js/glightbox.js"></script>

使用“href”属性指定要在画廊灯箱中加载的内容。请注意,分组的媒体内容必须具有相同的类。

<a href="1.jpg" class="glightbox-demo"><img src="1.jpg" alt="image"></a>
<a href="2.jpg" class="glightbox-demo"><img src="2.jpg" alt="image"></a>
<a href="3.jpg" class="glightbox-demo"><img src="3.jpg" alt="image"></a>
<a href="4.jpg" class="glightbox-demo" data-title="Responsive example"
data-description="您的浏览器将为分辨率选择最佳图像" data-sizes="(max-width: 600px) 480px, 800px" data-srcset="img480.jpx 480w img800.jpg 800w"><img src="small.jpg" alt="image" /></a>

创建一个类似 Facebook 的画廊灯箱并使用以下属性配置项目:

  • title

  • description

  • descPosition: bottom, top, left, right

  • type: media type

  • effect: slide, fade, zoom, none

  • width

  • height

<a href="1.jpg" class="glightbox-demo" data-glightbox="title:描述底部;description:您可以设置描述的位置">
  <img src="thumb.jpg" alt="image">
  <div class="glightbox-desc">
    <p>Description here</p>
  </div>
</a>

初始化 Glightbox 库并完成。

var myLightbox = GLightbox({
    'selector': 'glightbox-demo'
});

您还可以使用该elements选项在 JavaScript 中定义内容。

var myLightbox = GLightbox({ 
    elements: [
      {
        'href': '1.jpg',
        'type': 'image',
        'title': 'My Title',
        'description': 'Example',
      },
      {
        'href': '1.jpg',
        'type': 'video',
        'source': 'youtube',
        'width': 900
      }
  ],
});

这是自定义画廊灯箱的所有可能选项和回调函数的列表。

var myLightbox = GLightbox({ 
 
    // 默认选择器
    selector: 'glightbox',
 
    // 定义 JS
    elements: null,
 
    // 皮肤类
    skin: 'clean',
 
    // 显示关闭按钮
    closeButton: true,
 
    // 初始幻灯片索引
    startAt: 0,
 
    // 打开后
    autoplayVideos: true,
 
    // 如果真正的视频将专注于播放以允许播放器的键盘排序
    // 这将停用上一个和下一个箭头以更改幻灯片,因此仅在以下情况下使用它你知道你在做什么
    autofocusVideos: false,
 
    // bottom, top, left, right
    descPosition: 'bottom',
 
    // 灯箱大小
    width: 900,
    height: 506,
 
    // 视频大小
    videosWidth: 900,
     
    // 无限循环
    loop: false,
 
    // 启用可缩放
    zoomable: true,
 
    // 启用触摸导航
    touchNavigation: true,
 
    // 图像跟随轴在移动设备上拖动时。
    touchFollowAxis: true,
 
    // 启用键盘导航
    keyboardNavigation: true,
 
    // 在外部点击时关闭灯箱
    closeOnOutsideClick: true,
 
    // 视频播放器选项
    plyr: {
      css: 'https://cdn.plyr.io/3.5.6/plyr.css', // 默认不需要包含
      js: 'https://cdn.plyr.io/3.5.6/plyr.js', // 默认不需要包含
      config: {
        muted: false,
        hideControls: true,
        youtube: {
            noCookie: true,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3
        },
        vimeo: {
            byline: false,
            portrait: false,
            title: false,
            speed: true,
            transparent: false
        }
      }
    },
    
    // zoom, fade, none
    openEffect: 'zoomIn',
 
    // zoom, fade, none
    closeEffect: 'zoomOut', 
 
    // slide, fade, zoom, none
    slideEffect: 'slide', // fade, slide, zoom,
 
    // 更多文字
    moreText: 'See more',
 
    // 最大字符数
    moreLength: 60,
 
    // 附加 HTML
    lightboxHtml: '',
     
    // CSS 效果
    cssEfects: {
      fade: { in: 'fadeIn', out: 'fadeOut' },
      zoom: { in: 'zoomIn', out: 'zoomOut' },
      slide: { in: 'slideInRight', out: 'slideOutLeft' },
      slide_back: { in: 'slideInLeft', out: 'slideOutRight' }
    }
 
  // 启用可拖动
  draggable: true,
 
  // 用户必须拖动以转到上一张或下一张幻灯片的像素数
  dragToleranceX: 40,
 
  // 与可拖动一起使用。用户必须向上或向下拖动以关闭灯箱的像素数(设置 0 以禁用垂直拖动)
  dragToleranceY: 65,
 
  // 如果为 true,则幻灯片将自动更改为上一张/下一张或在达到 dragToleranceX 或 dragToleranceY 时关闭,否则它将等到鼠标被释放。
  dragAutoSnap: false,
 
  // 启用图片预加载
  preload: true,
 
  // 自定义 SVG 图标
  svg: {},
 
    // 回调
    beforeSlideChange: function(prevSlide, currentSlide) {},
    afterSlideChange: function(prevSlide, currentSlide) {},
    beforeSlideLoad: function(slideData) {},
    afterSlideLoad: function(slideData) {},
    slideInserted: function(slideData) {},
    slideRemoved: function(deletedIndex) {},
    onOpen: null,
    onClose: null,
 
});

API 方法。

// 转到幻灯片 3
myLightbox.goToSlide(3);
 
// 回到上一张幻灯片
myLightbox.prevSlide();
 
// 转到下一张幻灯片
myLightbox.nextSlide();
 
// 获取活动幻灯片
myLightbox.getActiveSlide();
myLightbox.getActiveSlideIndex();
 
// 在指定的幻灯片中播放视频。
myLightbox.slidePlayerPlay(number);
 
// 暂停指定幻灯片中的视频。
myLightbox.slidePlayerPause(number);
 
// 关闭画廊灯箱
myLightbox.close();
 
// 重新加载画廊灯箱
myLightbox.reload();
 
// 打开灯箱
myLightbox.open(node);
 
// 在特定索引处打开灯箱
myLightbox.openAt(index);
 
// 销毁灯箱
myLightbox.destroy();
 
// 在指定索引处添加幻灯片
myLightbox.insertSlide(object, index);
 
// 删除幻灯片
myLightbox.removeSlide(index);
 
// 播放指定幻灯片中的视频
myLightbox.playSlideVideo(index);
 
// 停止指定幻灯片中的视频。
myLightbox.stopSlideVideo(index);
 
// 获取指定幻灯片的播放器实例。
myLightbox.getSlidePlayerInstance(object, index);
 
// 获取所有玩家
myLightbox.getAllPlayers();
 
// 更新灯箱画廊元素。
myLightbox.setElements([]);


官方网站:https://github.com/biati-digital/glightbox

相关热词: glightbox灯箱画廊

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库