如何在Weebly中使用Lightbox

如何在Weebly中使用Lightbox

Lightbox 是一个弹出式叠加窗口,在单击时显示图像或视频的原始大小。 JavaScript 最初用于这种图像覆盖技术,后来引入了 jQuery,以提供更好的用户界面。 当图像显示在覆盖窗口中时,用户仍然可以使用向上/向下箭头和选项卡等键盘功能在页面上导航,而无需关闭弹出窗口。 页面外部区域变暗,单击外部灯箱将退出弹出窗口。

以下是作为灯箱查看时的图像示例:

灯箱图片
灯箱图片

推荐:如何使用统计信息监控 Weebly 网站流量

在 Weebly 中启用或禁用灯箱

Weebly 允许使用两个元素为图像添加灯箱效果:

  • 图像元素 – 您可以将灯箱效果添加到单个图像。
  • 图库元素 – 您可以将灯箱效果添加到图片库。

在单个图像上添加灯箱

将图像元素拖放到所需的内容区域,然后将图像添加到您的 Weebly 网站。 添加后,单击图像以查看高级弹出设置框,如下面的屏幕截图所示。

图像的 Weebly 灯箱选项
图像的 Weebly 灯箱选项

您可以使用“灯箱”选项启用或禁用灯箱。

与单张图片类似,添加图库元素并上传所有图片。 单击任何图像以查看高级设置,您可以在“缩略图”选项下启用灯箱。 画廊元素具有三个灯箱选项:

  • 仅灯箱
  • 灯箱和部分缩略图
  • 灯箱和完整缩略图
Weebly Gallery 元素上的灯箱效果
Weebly Gallery 元素上的灯箱效果

何时启用灯箱?

无需为您的 Weebly 网站上的所有图像启用 lightbox。 以下是您可能需要使用此功能的一些情况:

  • 将较大尺寸的图像调整为较小尺寸时
  • 当图像有文本并且用户需要将图像放大到原始大小才能查看文本时。
  • 优雅地查看图片库。

当图像的灯箱被禁用时,用户将无法单击图像以在弹出窗口中查看原始大小。 将图像链接到任何其他资源时也不能使用灯箱选项,因为单击图像会将您带到目标 URL。

Weebly 灯箱如何工作?

Weebly 使用来自 fancyapps.com 的第三方 jQuery fancybox 脚本来提供灯箱功能。 您可以通过阅读 fancyapps 网站上的提示和技巧部分来自定义灯箱效果。 如果您不喜欢 Weebly 的默认灯箱效果,您可以使用任何其他 JavaScript 或 jQuery 插件为您的图像添加灯箱效果。 一些插件还会在弹出的幻灯片视图中显示页面上的所有图像。

使用灯箱的缺点

虽然灯箱效果看起来不错,但它有很多缺点。

  • 由于使用 jQuery 脚本来提供花哨的效果,使用 lightbox 会增加页面加载时间,因此仅在需要时使用。
  • 由于无法在浏览器窗口中查看原始图像,因此复制图像 URL 的唯一方法是右键单击图像并复制 URL。
  • 如果在 Web 浏览器中禁用 JavaScript,该功能将不起作用。 禁用 JavaScript 时,将在浏览器窗口中打开全尺寸图像

推荐:如何防止Windows任务管理器中应用程序移动


发表评论