跳至主要内容

文档

Lightbox

创建一个包含图片和视频的自适应 Lightbox 图库。

Lightbox 组件完全自适应，支持触摸和滑动导航，以及桌面鼠标拖动。当在幻灯片之间滑动时，动画会紧贴您的指尖或鼠标光标。快速点击上一个和下一个导航，会使动画加速以跟上您的速度。所有动画都使用硬件加速，以实现更流畅的性能。

用法

要应用此组件，请将 uk-lightbox 属性添加到一个容器中，以将该容器内的所有锚链接转换为 Lightbox 链接。

<div uk-lightbox>
    <a href="image.jpg"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg">Open Lightbox</a>
</div>

Alt 属性

要向 Lightbox 中的图片添加 alt 属性，请在锚链接上设置 data-alt 属性。

<div uk-lightbox>
    <a href="image.jpg" data-alt="Image"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-alt="Image">Open Lightbox</a>
</div>

标题

要在 Lightbox 底部显示标题，请在锚链接上设置 data-caption 属性。

<div uk-lightbox>
    <a href="image.jpg" data-caption="Caption"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Caption">Open Lightbox</a>
</div>

动画

默认情况下，Lightbox 图库使用滑动动画。您可以设置 animation 选项来使用不同的动画。可能的取值有 slide、fade 和 scale。

<div uk-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>
  • 滑动
    淡入淡出
    缩放
  • <div class="uk-h3">Slide</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Fade</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Scale</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: scale">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

内容来源

Lightbox 不仅限于图片。其他媒体，例如视频，也可以显示。只要视频不可见，它就会暂停，一旦变得可见，它就会恢复播放。要为视频显示海报图片，请设置 data-poster 属性。

<div uk-lightbox>
    <a class="uk-button" href="video.mp4" data-poster="image.jpg"></a>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA"></a>
    <a class="uk-button" href="https://vimeo.com/1084537"></a>
    <a class="uk-button" href="https://www.google.com/maps"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Image">Image</a>
    <a class="uk-button uk-button-default" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" data-caption="Video">Video</a>
    <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-caption="YouTube">YouTube</a>
    <a class="uk-button uk-button-default" href="https://vimeo.com/1084537" data-caption="Vimeo">Vimeo</a>
    <a class="uk-button uk-button-default" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Google Maps" data-type="iframe">Google Maps</a>
</div>

注意 在 YouTube 链接中使用 youtube-nocookie.com，Lightbox 将使用该域名嵌入 YouTube 视频。

手动内容类型

Lightbox 使用 href 属性来确定链接内容的类型。如果路径中没有定义文件名扩展名，只需在 <a> 标签中添加 data-type 属性。

提示 YouTube 和 Vimeo URL 将自动处理。

选项 描述
data-type="image" 内容类型为图片。
data-type="video" 内容类型为视频。
data-type="iframe" 内容类型为普通网站。

自定义属性

您可以使用 data-attrs 属性向 Lightbox 内容项添加自定义属性。属性以与普通组件选项相同的方式传递，例如 data-attrs="width: 1280; height: 720;"

<div uk-lightbox>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-attrs="width: 1280; height: 720;"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-caption="YouTube" data-attrs="width: 1280; height: 720;">YouTube</a>
</div>

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号隔开多个选项。 了解更多

选项 值 默认值 描述
animation 字符串 slide Lightbox 动画模式（slide、fade 或 scale）。
autoplay 布尔值 false Lightbox 自动播放。
autoplay-interval 数字 7000 自动播放模式下切换幻灯片之间的延迟。
pause-on-hover 布尔值 false 将自动播放模式暂停在悬停时。
video-autoplay 布尔值 false Lightbox 视频自动播放。
index 字符串、数字 0 要显示的 Lightbox 项目。从 0 开始的索引。
toggle CSS 选择器 a 切换选择器 - 点击时打开 Lightbox 面板。

JavaScript

了解更多关于 JavaScript 组件。

初始化

// To apply lightbox to a group of links
UIkit.lightbox(element, options);

// To dynamically initialize the lightbox panel
UIkit.lightboxPanel(panelOptions);

方法

以下方法可用于组件

显示

UIkit.lightbox(element).show(index);

显示 Lightbox 的面板和项目。

隐藏

UIkit.lightbox(element).hide();

隐藏 Lightbox 的面板。

如果您只想通过 JS API 直接使用 Lightbox 面板，您可以设置以下选项。

选项 值 默认值 描述
animation 字符串 slide Lightbox 动画模式（slide、fade 或 scale）。
autoplay 布尔值 false Lightbox 自动播放。
autoplay-interval 数字 7000 自动播放模式下切换幻灯片之间的延迟。
pause-on-hover 布尔值 false 将自动播放模式暂停在悬停时。
video-autoplay 布尔值 false Lightbox 视频自动播放。
index 数字 0 要显示的初始项目。（从零开始）
速度 数字 2 动画速度（像素/毫秒）。
预加载 数字 1 要预加载的项目数量。（当前活动项目左侧和右侧）
项目 数组 [] 要显示的项目数组，例如 [{source: 'images/size1.jpg', caption: '900x600'}]
模板 字符串 默认标记 模板字符串。
延迟控制 数字 3000 控件在淡出之前延迟的时间（毫秒）。
容器 字符串 body 通过选择器定义目标容器，以指定 Lightbox 应该在 DOM 中的哪个位置追加。

事件

以下事件将在附加了此组件的元素上触发

名称 描述
beforeshow 在显示 Lightbox 之前触发。
beforehide 在隐藏 Lightbox 之前触发。
显示 在显示 Lightbox 之后触发。
显示完毕 在 Lightbox 的显示动画完成之后触发。
隐藏 在 Lightbox 的隐藏动画开始之后触发。
隐藏完毕 在隐藏 Lightbox 之后触发。
itemload 在项目加载时触发。
beforeitemshow 在显示项目之前触发。
itemshow 在显示项目之后触发。
itemshown 在项目的显示动画完成之后触发。
beforeitemhide 在隐藏项目之前触发。
itemhide 在项目的隐藏动画开始之后触发。
itemhidden 在项目的隐藏动画完成之后触发。

方法

以下方法可用于组件

显示

UIkit.lightboxPanel(element).show(index);

显示 Lightbox 面板和项目。

名称 类型 默认值 描述
index 字符串、数字 0 要显示的 Lightbox 项目。从 0 开始的索引。

隐藏

UIkit.lightboxPanel(element).hide();

隐藏 Lightbox 面板。

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

开始 Lightbox 的自动播放。

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

停止 Lightbox 的自动播放。

无障碍

Lightbox 组件遵循 对话框（模态框）WAI-ARIA 设计模式 和 轮播 WAI-ARIA 设计模式，并自动设置适当的 WAI-ARIA 角色、状态和属性。

上一个/下一个导航遵循 按钮模式。

关闭组件会自动设置适当的 WAI-ARIA 角色和属性。

键盘交互

可以通过键盘使用以下键访问 Lightbox 图库。

国际化

Lightbox 组件使用以下翻译字符串。了解更多关于 翻译组件。

键 默认值 描述
下一个 下一张幻灯片 下一张幻灯片按钮的 aria-label。
上一个 上一张幻灯片 上一张幻灯片按钮的 aria-label。
slideLabel %s of %s 幻灯片的 aria-label。
关闭 关闭 关闭按钮的 aria-label。