- N +

LightGallery - 图像和视频灯箱画廊插件

一个轻量级、模块化的 JavaScript 图像和视频灯箱画廊插件。

lightGallery 采用最现代的技术构建,可实现最佳性能和质量。它支持所有现代浏览器,包括 IE 10 及更高版本。

采用模块化架构构建。轻松创建您自己的模块,或分离您不想使用的模块。lightGallery 带有许多内置模块,例如缩略图、缩放等。

lightGallery 针对移动设备和平板电脑进行了高度优化,以获得原生外观和感觉并实现最佳性能。支持移动设备单独设置,进一步优化。


功能特点

触摸手势:lightGallery 支持多种触摸手势来执行特定操作,例如捏合放大、缩小、双击缩放、拖动或滑动导航到不同的幻灯片、垂直滑动或拖动关闭等。

虚拟幻灯片:lightGallery 仅在 DOM 中保留最少数量的幻灯片。因此,即使您有大量幻灯片,整体性能也不会受到影响。lightGallery 一次仅加载 3 张幻灯片。当您导航到剩余的幻灯片时,就会加载它。

20+ 动画:lightGallery 使用硬件加速 CSS3 过渡来实现更快的动画性能。lightGallery 附带大量精美的内置动画。如果需要,您可以轻松创建自己的动画

响应式图像:lightGallery 允许您为不同的视口加载不同的图像。还支持原生 html5 srcset 属性和图片标签,用于显示高分辨率图像。lightGallery 也支持任何图像格式,例如 webp。

动画缩略图:您还可以选择从设置中启用动画缩略图。否则将使用正常的缩略图。您还可以自动加载 YouTube 或 Vimeo 视频的缩略图。

社交分享:lightGallery 共享插件允许您使用唯一的 url 将您的图像/视频共享到社交媒体平台,例如 Twitter 或 Facebook。您可以轻松地将自己的社交分享按钮添加到lightGallery中

浏览器历史记录:lightGallery 哈希插件可让您为每个图库图像提供自定义的唯一 URL。此链接可用于在网络上的任何位置共享媒体。它也允许您通过浏览器后退/前进按钮导航到不同的幻灯片。

触摸并拖动:lightGallery 支持触摸屏设备上的触摸和滑动导航,以及桌面上的鼠标拖动。这允许用户通过在媒体上滑动或拖动来在幻灯片之间导航。

更新幻灯片:lightGallery 支持添加、编辑、删除幻灯片,即使图库已打开。您只需要修改当前的图库项目并通过 updateSlides 方法传递它。lightGallery 会自动为您整理幻灯片。

外部视频支持:lightGallery 视频模块允许您创建漂亮的 YouTube、Vimeo 或 Wistia 视频库。它具有许多功能,例如在幻灯片更改时自动播放或暂停视频、自动获取缩略图、海报等。

动态模式:lightGallery 可以通过以编程方式启用动态选项并通过传递代表画廊元素的对象数组来填充来立即启动。如果您有复杂的画廊,这非常有用。

响应式:lightGallery 针对移动设备进行了高度优化。您可以对移动设备使用单独的设置。lightGallery 使用仅 CSS 的方法来调整图像和视频的大小,以在移动设备上实现最佳性能

HTML5 视频:lightGallery支持所有类型的HTML5视频格式,例如MP4、WebM、Ogg等。lightGallery内置了对自定义视频播放器videoJs的支持。借助自定义事件可以轻松集成其他播放器。

辅助功能 (A11y) 支持:lightGallery 支持键盘导航来导航不同的幻灯片,并使用转义键关闭图库,并使用推荐的辅助功能 HTML 标记使键盘和屏幕阅读器用户可以访问 lightGallery。

旋转和翻转图像:一键左右旋转、垂直和水平翻转。lightGallery 还为您提供了保存更新的旋转、翻转值的钩子,以将其保存在服务器上或执行您想要执行的任何其他操作。

评论界面:lightGallery 开箱即用地支持 Facebook 和 Disqus 评论。评论插件允许人们使用 Facebook 或 Disqus 帐户对幻灯片发表评论。您也可以轻松添加自己的评论小部件。

寻呼机:如果您喜欢最小布局,您可以选择寻呼机插件而不是缩略图。寻呼机创建代表每张幻灯片的最小图形,并将鼠标悬停在每个寻呼机项目上,显示相应的缩略图。

自动播放、全屏等:LightGallery 支持诸如根据用户操作播放或暂停的自动播放幻灯片等功能,以及可通过单击工具栏上的全屏图标进行切换的本机 HTML5 全屏,以及许多其他典型的图库功能。


相关站点

官方网站:https://www.lightgalleryjs.com

文档教程:https://www.lightgalleryjs.com/docs/getting-started/

在线演示:https://www.lightgalleryjs.com/demos/thumbnails/

Github:https://github.com/sachinchoolur/lightGallery





有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共33人参与)参与讨论

    还没有评论,来说两句吧...