当您拥有生动的图像和视频来展示公司的产品和服务时,它会很有帮助。 例如,在酒店的情况下,访问者看到酒店提供的不同房间,游泳池和其他服务的图像的影响要大得多,而不仅仅是被文字墙打招呼。
为访问者提供很多图像以查看外观是一个很好的策略,可以展示您的产品或服务的出色程度,但也会分散您的注意力。 单个图像和其他元素可能没有得到应有的重视,因为它们正在与分散在网页上的其他充满活力的元素竞争。
这是灯箱发挥重要作用的地方。 它们是使网站访问者的注意力集中在画廊或投资组合中的特定图像或元素上的一种好方法,方法是使其弹出并调暗网页的其余部分,直到用户做出其他决定为止。
唯一的问题是,那里有成千上万个灯箱插件,很难选择最能为您服务的插件。
我们可以帮助您做出决定! 为了让您更轻松地选择最好的灯箱插件添加到您的网站,我们创建了2019年五个最好的灯箱插件的列表。这篇文章将深入介绍其所有功能,以便您可以就在您的网站上使用哪个。
1. LC灯箱
我们列表中的第一个插件是LC Lightbox。 它具有您希望在灯箱插件中使用的所有功能以及更多功能。
以下是其一些常见功能:
- 您可以创建幻灯片以遍历所有图像。 可以手动或自动初始化幻灯片。
- 您可以具有与每个图像或元素关联的单独的标题,描述和作者。
- 它带有缩略图导航和在社交网络上共享的功能。
几乎每个灯箱插件都支持我上面列出的功能。 LC灯箱的独特之处在于它的其他功能,例如:
- 可以将多种内容类型(例如图像)与来自YouTube,Vimeo,Dailymotion和
iframe
或其他HTML元素的视频混合。 - 它提供了不依赖于服务器端脚本的直接下载按钮。 如果您希望访问者能够下载他们喜欢的任何图像文件,这将特别有用。
- 它支持鼠标以及基于键盘的导航。
- 该插件的开发考虑了触摸设备。 在智能手机上使用此灯箱插件时,用户将能够使用滑动和捏合手势。
似乎这些功能还不够,LC Lightbox具有更出色的改变游戏规则的功能:
- 您可以为灯箱中的每个项目提供自己的直接链接。
- 访客可以使用双击或捏合手势逐步放大他们喜欢的任何图像。
- 您甚至可以使用Facebook和Disqus将评论与所有元素集成在一起!
这是一长串的功能,但是当我说我仍然省略一些功能以使帖子简短时,请相信我。 您可以在其实时预览页面上了解LC Lightbox的所有功能。
检查一下并尝试其他配置选项,以查看此插件的实际效果。
2. 响应式自举组合和灯箱
如果您正在运行基于Bootstrap框架的网站,则此插件将是集成灯箱的最佳选择。
它利用了Bootstrap中已内置的功能来使插件轻巧且功能丰富。 它与Bootstrap 3和Bootstrap 4完全兼容。
以下是使其成为基于Bootstrap构建的网站的理想选择的一些功能:
- 该插件可让您在2、3、4、5或6列网格系统中布置不同的元素,例如图像和视频。
- 它利用内置轮播实现自己的一个。 您可以在实时预览页面上看到它的运行情况 。
- Bootstrap的响应能力也存在于此插件中。 因此,灯箱在手机,平板电脑以及台式机上看起来都不错。
使该插件令人赞叹的其他一些功能包括:
- 六个不同的轮播,内容从图像和视频到电子商务和博客文章
- 具有独特布局的即用型示例,可帮助您尽快启动和运行
- 可以将颜色方案组合在一起,以确保灯箱与网站的其余部分完美融合
- 嵌入来自YouTube或Vimeo或自行托管的视频
到目前为止, Responsive Bootstrap Portfolio和Lightbox的所有评论者都将其评为5星。 请务必查看演示 ,亲自看看为什么这个插件获得了如此高的评价。
3. 带有LightBox的JQuery缩略图库
该插件带有一个精美的缩略图库,其中包含一个灯箱。 您可以轻松地在图库中添加不同纵横比和尺寸的图像和视频,该插件将很好地处理它们。
您可能会喜欢以下一些功能:
- 该插件易于设置。 因此,您将很快拥有一个功能齐全的灯箱画廊。
- 您可以为图像和视频选择基于网格的布局还是基于行的布局。
- 可以通过简单滚动或使用滚动按钮来控制不同图库项目之间的滚动。
- 您可以水平或垂直对齐显示在灯箱上的缩略图。
以下是一些其他功能,可以改善此插件的可用性:
- 当图像和视频的尺寸和纵横比不断变化导致灯箱导航按钮到处移动时,基于键盘的导航使在所有元素中导航变得非常容易。
- 您还可以访问不同的公共方法和回调,以切换内部幻灯片显示,对缩略图鼠标悬停和鼠标悬停等事件进行操作。
当您尝试不同的演示时 ,您可能会注意到该插件提供了最小的画廊或灯箱样式。 如果您想完全控制样式并确保没有任何异常,这可能是一件好事。
4. Boxaroo自适应灯箱
Boxaroo自适应灯箱插件还提供了许多功能,使其成为了不起的灯箱插件。 如果要向灯箱添加有趣的动画和效果,则应使用该插件。
以下是其有用功能的简短列表:
- 动画经过硬件加速以充分利用GPU并为您提供最佳性能。
- 您创建的灯箱可以轻松处理各种类型的内容,从Vimeo视频到交互式Flash游戏。
- 该插件具有充分的响应能力,并且设计得可以根据设备完美缩放。
- 该插件会优雅地降低性能和其他功能,以使灯箱与IE7以前的浏览器兼容。
此外,还有一些使Boxaroo在此页面上列出的所有插件中独一无二的功能:
- 它带有70种不同的GraphicRiver物品,总值287美元! 其中包括背景和箭头,使Boxaroo拥有专业且独特的外观。
- 该插件支持字幕,动画,可见性,缩放和位置等元素的独立样式。
- 您可以独立控制每个灯箱的关闭,上一个和下一个按钮。
- 您可以使用图片,图块和动画颜色为灯箱创建有趣的背景。
- 您可以完全控制阴影和高光,包括颜色,半径等。
只需查看插件网站上提供的演示,您将不会失望。
5. ModuloBox:NextGen Lightbox JavaScript插件
ModuloBox是一个响应式灯箱插件,致力于提供最佳性能,同时为您提供许多高级功能。
以下是使该插件很棒的功能列表:
- 除了图像之外,您还可以添加视频,
iframe
或其他HTML5内容。 - 它带有手势支持,例如双击和捏合。 移动访问者会感到宾至如归。
- 您也可以使用键盘或鼠标在灯箱中导航。
- 在同一页面上支持多个画廊。
- 您可以在缩略图的帮助下浏览图库。 它还具有用于沉浸式体验的全屏模式和幻灯片模式,可自动滚动浏览所有图像。
- 该插件还支持RTL布局,这将反转所有动画和字幕的方向。
ModuloBox提供了更多功能,您可以在产品页面上阅读其所有功能。
结论
我们在本页上列出的每个灯箱插件都有其独特的优势,使其非常适合特定情况。
如果此页面上列出的任何插件似乎都不适合您的项目,您还可以查看Envato Market上提供的许多其他插件。 您最喜欢哪个灯箱插件? 让我们在评论中知道。
翻译自: https://code.tutsplus.com/articles/best-jquery-lightbox-plugins-to-make-your-page-pop--cms-32897