带有Lightgallery.js的全屏灯箱幻灯片

这对于展示相关照片或让访客浏览作品集 (设计,艺术品,摄影作品)非常有用。

任何出色的博客或投资组合网站都可以从模态灯箱幻灯片中受益。

您可以使用任意数量的照片进行设置 ,每张幻灯片占据整个屏幕

使用lightgallery.js ,您只需安装该库使其运行

带有Lightgallery.js的全屏灯箱幻灯片

使用lightgallery.js, 所有焦点都放在幻灯片和第一个可见图像上。

我非常喜欢此插件,而不是仅占屏幕一部分的其他幻灯片。

在每张幻灯片的底部,您都可以找到带有链接或所需文字的简短说明

按顺序,它们像这样去:

在右上角,您会看到一系列用于扩展功能 的按钮

  • 播放幻灯片
  • 放大/缩小
  • 全屏浏览器
  • 社交分享
  • 图片下载
  • 关闭幻灯片

您可以通过在调用插件时编辑选项来选择要显示的按钮。

但是,您还将找到有关自定义数据属性Sass变量甚至是将模块构建到lightgallery上的插件API的信息。

它包含有关选项回调方法的详细信息。

实际上,我对文档中包含多少详细信息感到惊讶。

您可以用手指或什至用鼠标在图库中滑动照片。

哦,我是否提到它完全适合移动设备

对于希望采用出色方法在网站上展示其作品集的设计师或摄影师而言,这是理想的选择。

这确实是最好的灯箱画廊插件,可提供最佳的用户体验。

您甚至可以嵌入来自YouTube或Vimeo等网站的iframe或视频

但它也可以与大型库(例如jQuery或Bootstrap)一起使用。

该库没有任何依赖关系 ,并且可以在纯JavaScript上运行

并且,如果您需要源代码 ,请转到GitHub存储库并自己获取一个副本

您可以在“ 演示”页面上查看完整的演示 ,或查看下面

如果您希望将其用作jQuery插件则可以为jQuery用户移植一个lightgallery.js插件


翻译自: https://www.hongkiat.com/blog/fullscreen-lightbox-lightgallery-js/