jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容,这篇jQuery Lightbox灯箱插件推荐为你介绍2021最佳jQuery Lightbox插件。
当您拥有生动的图像和视频来展示您公司的产品和服务时,它会很有帮助。例如,在酒店的情况下,访客看到酒店提供的不同房间、游泳池和其他服务的图像,而不仅仅是被文字墙打招呼,效果会更好。
为访问者提供大量图片是展示您的产品或服务有多棒的好策略,但它也可能会让人分心。单个图像和其他元素可能不会得到应有的关注,因为它们正在与散布在整个网页上的其他充满活力的元素竞争。
这是灯箱发挥重要作用的地方。它们是将您的网站访问者的注意力集中在图库或作品集中的特定图像或元素上的好方法,通过使其弹出并使网页的其余部分变暗,直到用户做出其他决定为止。
jQuery Lightbox灯箱插件推荐
唯一的问题是,市面上有数以千计的灯箱插件,很难选择一款最适合您的插件。我们可以帮助做出决定!为了让您更轻松地选择要添加到网站的最佳灯箱插件,我们创建了2021年五个最佳灯箱插件的列表。本文将深入介绍它们的所有功能,以便您做出明智的决定在您的网站上使用哪一个。
强烈推荐
Revolution Lightbox灯箱插件
Revolution Lightbox 是一个灵活且响应迅速的灯箱,它允许在弹出窗口中创建多媒体内容库。使用技术构建并使用最新的 Javascript 和 CSS 技术,它提供了展示您的媒体的高级功能。Revolution Lightbox灯箱插件我将其排在第一。
Revolution Lightbox
Revolution Lightbox 是一个灵活且响应迅速的灯箱,它允许在弹出窗口中创建多媒体内容库。使用技术构建并使用最新的 Javascript 和 CSS 技术,它提供了展示您的媒体的高级功能。Revolution Lightbox灯箱插件我将其排在第一,排在第一是有原因的,主要基于以下几点:
- 价格在本文推荐的灯箱插件中最贵,贵有贵的品质,有它,开发这种效果可以少走不少弯路。
- 现代化的UI设计,最新的javascript和CSS技术构建,支持非常多的文件显示,下面会介绍
- 支持视频灯箱效果,官方文档教程非常详细
- 延迟加载,键盘支持,拖动,全屏等非常多的功能,下面会介绍。
- 总之非常推荐…
还提供了许多功能,使其成为一个很棒的灯箱插件。如果你想为你的灯箱添加有趣的动画和效果,这是你应该使用的插件。
Revolution Lightbox主要特点:
响应式布局– 无论使用哪种设备,都具有完全响应性和适应性。
显示您能想到的任何内容– 显示图像(.jpg、.jpeg、.png、.bmp、.gif、.tif、.tiff、.jfi、.jfif、.exif、.svg)、音频(.mp3、. m4a、.acc)、Shoutcast、Icecast、视频(.mp4、.webm、.ogv)、Youtube、Vimeo、HLS/HTTP Live Streaming/m3u8、DASH MPEG、Google Drive、Dropbox 等云平台、PDF、HTML 内容、iframe 等等……
静态内容和动态内容——静态内容将自动创建灯箱画廊并将必要的事件添加到与查询选择器相关的页面元素中,另一方面,动态内容允许显示从隐藏的 HTML 标记创建的一个或多个画廊或通过单击页面中您选择的元素来获取 JSON。
包含Easy Video Player– 世界上唯一具有真正视频和音频集成的灯箱。Easy Video Player是用于播放视频和音频文件的引擎,它非常棒,它支持多种音频和视频格式(mp4、mp3、mp4a、.acc、.m3u8、.mpd、Youtube、Vimeo 等)并且自带具有高级功能,例如字幕、Chromecast、VAST 和 VMAP 广告、Google Adsense 广告、原生全屏支持等等……
易于配置和安装– 易于包含在您的项目中。提供详细的文档和视频教程以及可供使用的示例演示页面。
图形图像 .png 皮肤或矢量皮肤– 带有 png 图像图标或矢量 SVG 图标的可自定义皮肤,在视觉上矢量和图形皮肤看起来是一样的。包含 Figma/.fig 文件以及有关如何使用图形和矢量皮肤的视频教程。
真正的多媒体内容– 支持图像(.jpg、.jpeg、.png、.bmp、.gif、.tif、.tiff、.jfi、.jfif、.exif、.svg)、音频(.mp3、m4a、. acc)、Shoutcast、Icecast、视频(.mp4、.webm、.ogv)、Google Drive、Dropbox 或其他云平台、Youtube、Vimeo、HLS/HTTP Live Streaming m3u8、DASH MPEG、谷歌地图、PDF、HTML 内容、iframe等等。
自动媒体内容类型检测——Revolution Lightbox 将根据媒体 URL 为媒体项目设置适当的类型(视频、音频、图像等),无需任何额外要求。
深层链接 – 当前打开的画廊项目的唯一且可共享的链接。
模态支持– 可以将灯箱设置为模态,这样它只能使用关闭按钮关闭。
静态和动态内容– 世界上唯一具有静态和动态内容的灯箱。
自定义媒体查询选择器——将自定义查询选择器设置为任何 CSS 选择器作为类名或属性,以便从您的文档中打开匹配的元素。
延迟加载– 此功能在后台加载图像和视频海报,以获得无缝的用户体验。
键盘支持– ESC:关闭灯箱,向左和向右箭头:如果视频正在播放,则向前或向后跳过视频 10 秒,如果视频未播放,则更改幻灯片,F:视频全屏/正常屏幕,向上和向下箭头:视频音量增大或降低音量,M:视频静音/取消静音,SPACE:视频播放/暂停。
拖动支持– 拖动支持在鼠标和基于触摸的屏幕上的幻灯片/项目之间导航。
按钮自动隐藏– 灯箱按钮(关闭、分享、下一个、上一个等)可以在用户不活动几秒钟后隐藏,可以根据需要设置此持续时间。
项目按钮导航– 下一个和上一个按钮导航到下一个或上一个幻灯片/项目。
幻灯片和幻灯片按钮– 使用播放/暂停按钮的灯箱幻灯片,幻灯片之间的时间间隔可以以毫秒为单位设置。
幻灯片自动播放和自动停止– 幻灯片可以设置为自动播放,或在显示最后一张幻灯片时自动停止。
圆形幻灯片动画– 用于显示幻灯片进度的圆形幻灯片动画。
全屏支持– 桌面和移动设备上的全屏/普通屏按钮和本机全屏支持。
最大化和最小化图像– 最大化/最小化按钮和最大化/最小化图像的双击/点击功能。最大化缩放系数可以设置为自定义值,以允许对最大化图像进行微调控制。
三种不同的灯箱按钮位置– 灯箱按钮可以放置在项目旁边、灯箱顶部或项目外部。
分享按钮和分享窗口– 与九个分享社交平台的分享按钮和分享窗口,分享社交平台按钮可以根据需要订购和删除。
缩略图支持– 可自定义缩略图支持,可以修改缩略图之间的大小和其他参数,如间隙。
Easy Video Player 作为视频和音频引擎– 世界上唯一具有真正视频和音频集成的灯箱。Easy Video Player是用于播放视频和音频文件的引擎,它很棒,它支持多种音频和视频格式。
各种视频和音频格式– 支持各种视频或音频格式,如.mp3、.mp4、Shoutcast、Icecast、Youtube、Vimeo和 Vimeo Pro、HLS/.m3u8、DASH MPEG/.mpd 直播、Google Drive、Dropbox 等云平台。
点击这里可以查看 Revolution Lightbox 插件的演示效果。
LC Lightbox
我们列表中的第二个插件是 LC Lightbox。它具有您在灯箱插件中期望的所有功能等等。
以下是它的一些共同特点:
- 您可以创建幻灯片以遍历所有图像。幻灯片可以手动或自动初始化。
- 您可以拥有与每个图像或元素相关联的单独标题、描述和作者。
- 它带有缩略图导航和在社交网络上分享的能力。
几乎每个灯箱插件都支持我上面列出的功能。LC Lightbox 的独特之处在于其附加功能,例如:
- 能够混合多种内容类型,例如图像与来自 YouTube、Vimeo、Dailymotion 和
iframe
s 或其他 HTML 元素的视频。 - 它提供了一个不依赖于服务器端脚本的直接下载按钮。如果您希望访问者能够下载他们喜欢的任何图像文件,这将特别有用。
- 它支持基于鼠标和键盘的导航。
- 该插件的开发考虑到了触摸设备。在智能手机上使用此灯箱插件时,用户将能够使用滑动和捏合手势。
似乎这些功能还不够,LC Lightbox 还有更棒的改变游戏规则的功能:
- 您可以为灯箱中的每个项目提供自己的直接链接。
- 访问者可以使用双击或捏合手势逐步放大他们喜欢的任何图像。
- 您甚至可以使用 Facebook 和 Disqus 将评论与您的所有元素集成在一起!
这是一长串功能,但请相信我,当我说我仍然遗漏了一些功能以保持帖子简短时。
检查并尝试不同的配置选项,看看这个插件实际上有多好。
Responsive Bootstrap Portfolio And Lightbox
如果您正在运行基于 Bootstrap 框架的网站,则此插件将是集成灯箱的最佳选择。
它利用 Bootstrap 中已经内置的功能来保持插件轻量级和功能丰富的同时。它与 Bootstrap 3 和 Bootstrap 4 完全兼容。
以下是一些使其成为基于 Bootstrap 构建的网站的完美选择的功能:
- 该插件允许您在 2、3、4、5 或 6 列网格系统中布置不同的元素,如图像和视频。
- 它利用内置的轮播来实现自己的一个。您可以在实时预览页面上看到它的运行情况。
- Bootstrap 的响应能力也存在于这个插件中。所以灯箱在手机和平板电脑以及台式机上看起来都不错。
使这个插件令人惊叹的其他一些功能是:
- 六种不同的内容轮播,从图像和视频到电子商务和博客文章
- 具有独特布局的即用型示例,可帮助您尽快启动和运行
- 可以组合配色方案以确保灯箱与网站的其余部分完美融合
- 嵌入来自 YouTube 或 Vimeo 的视频,或自托管
到目前为止,Responsive Bootstrap Portfolio 和 Lightbox 的所有评论者都给了它 5 颗星。请务必查看演示并亲自了解为什么此插件获得如此高的评价。
JQuery Thumbnail Gallery With LightBox
这个插件带有一个漂亮的缩略图库,并带有一个灯箱。您可以轻松地在图库中添加不同纵横比和尺寸的图像和视频,该插件会很好地处理它们。
以下是您可能喜欢的一些功能:
- 该插件易于设置。因此,您很快就会拥有一个功能齐全的灯箱画廊。
- 您可以为图像和视频选择基于网格或基于线的布局。
- 可以通过简单的滚动或使用滚动按钮来控制不同画廊项目之间的滚动。
- 您可以水平或垂直对齐与灯箱一起显示的缩略图。
以下是提高此插件可用性的一些其他功能:
- 当图像和视频的大小和纵横比不断变化导致灯箱导航按钮四处移动时,基于键盘的导航可以非常轻松地浏览所有元素。
- 您还可以访问不同的公共方法和回调来切换内部幻灯片,对缩略图鼠标悬停和鼠标移开等事件采取行动。
当您尝试不同的演示时,您可能会注意到此插件提供了画廊或灯箱的最小样式。如果您想完全控制样式并确保没有任何不合适的地方,这可能是一件好事。
ModuloBox – NextGen Lightbox灯箱插件
ModuloBox 是一个响应式灯箱插件,专注于提供最佳性能,同时为您提供许多高级功能。
以下是使这个插件很棒的功能列表:
- 除了图像,您还可以添加视频、
iframe
s 或其他 HTML5 内容。 - 它带有手势支持,如双击和捏合。移动访问者会感到宾至如归。
- 您还可以使用键盘或鼠标浏览灯箱。
- 支持同一页面上的多个画廊。
- 您可以在缩略图的帮助下浏览图库。它还配备了全屏模式,可提供身临其境的体验,还有幻灯片模式可自动滚动浏览所有图像。
- 该插件还支持 RTL 布局,它将反转所有动画和字幕的方向。
ModuloBox还提供更多功能,您可以在产品页面上阅读有关其所有功能的信息。
jQuery Lightbox插件结论
我们在此页面上列出的每个灯箱插件都具有独特的优势,使其非常适合特定情况。
- 如果您想要一个带有从缩略图导航到评论集成的大量功能集的插件,您应该考虑使用LC Lightbox。
- 如果您的网站基于 Bootstrap 框架,那么使用Responsive Bootstrap Portfolio 和 Lightbox等插件将帮助您利用该框架的所有功能。
- 正在寻找易于定制的东西的人会发现带有 Lightbox插件的jQuery Thumbnail Gallery是正确的选择。
- 对于那些想要在他们的灯箱中内置精美动画和效果的人来说,Revolution Lightbox将是完美的选择。
- 最后,ModuloBox将为那些需要在他们的灯箱中提供 RTL 支持的人提供很好的服务。
如果此页面上列出的插件似乎都不适合您的项目,您还可以查看Envato Market上提供的许多其他插件中的一些。你最喜欢哪个灯箱插件?