跳到主要内容

文档

灯箱

使用图片和视频创建一个响应式的灯箱画廊。

灯箱组件是完全响应式的,支持触摸和滑动导航,以及桌面的鼠标拖动。在幻灯片之间滑动时,动画会真正地粘在您的指尖或鼠标光标上。快速点击上一个和下一个导航将使动画加速,以跟上您的节奏。所有动画都经过硬件加速,以获得更流畅的性能。

用法

要应用此组件,请将 `uk-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 属性

要在灯箱中为图像添加 `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>

标题

要在灯箱底部显示标题,请在锚点上设置 `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>

动画

默认情况下,灯箱画廊使用滑动动画。您可以将 `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>

默认情况下,灯箱会显示来自 幻灯片导航组件 的幻灯片导航。要隐藏幻灯片导航,请设置 `slidenav: false` 选项。要显示基于项目的导航,例如来自 缩略图导航组件点导航组件 的导航,请将 `nav` 选项设置为 `thumbnav` 或 `dotnav`。

<div uk-lightbox="slidenav: false; nav: thumbnav">
    <a href="image.jpg"></a>
</div>
缩略图导航
点导航
<div class="uk-h3">Thumbnav</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="nav: thumbnav; slidenav: false">
    <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">Dotnav</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="nav: dotnav; slidenav: false">
    <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>

计数器

要显示包含当前项目编号和项目总数的计数器,请添加 `counter: true` 选项。

<div uk-lightbox="counter: true">
    <a href="image.jpg"></a>
</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="counter: true">
    <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>

颜色模式

要根据灯箱内容调整叠加控件的颜色以获得更好的可见性,请使用 `data-attrs` 选项添加来自 反转组件 的 `.uk-inverse-light` 或 `.uk-inverse.dark` 类。

<div uk-lightbox>
    <a href="image.jpg" data-attrs="class: uk-inverse-light"></a>
</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="nav: thumbnav; slidenav: false">
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2" data-attrs="class: uk-inverse-light">
            <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" data-attrs="class: uk-inverse-dark">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

内容源

灯箱不限于图像。也可以显示其他媒体,例如视频。视频将在不可见时暂停,并在再次可见时恢复。要显示视频的封面图像,请设置 `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`,灯箱将使用该域名来嵌入 YouTube 视频。


手动内容类型

灯箱使用 `href` 属性来确定链接内容的类型。如果路径中未定义文件名扩展名,只需将 `data-type` 属性添加到 `` 标签即可。

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

选项 描述
data-type="image" 内容类型是图像。
data-type="video" 内容类型是视频。
data-type="iframe" 内容类型是常规网站。

延迟控制

默认情况下,如果鼠标不移动,控件会在短时间后隐藏。设置 `delay-controls: 0` 选项以始终显示控件。

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

背景关闭

默认情况下,如果单击背景,灯箱会关闭。要阻止此行为,请设置 `bg-close: false` 选项。

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

自定义属性

您可以使用 `data-attrs` 属性为灯箱内容项添加自定义属性。这些属性像通常的组件选项一样传递,例如 `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>

自定义模板

这是默认的灯箱模板。

<div class="uk-lightbox uk-overflow-hidden">
    <div class="uk-lightbox-items"></div>
    <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
        <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
    </div>
    <div class="uk-position-center-left uk-position-medium uk-transition-fade" uk-inverse>
        <a class="uk-lightbox-slidenav" href uk-slidenav-previous uk-lightbox-item="previous"></a>
    </div>
    <div class="uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse>
        <a class="uk-lightbox-slidenav" href uk-slidenav-next uk-lightbox-item="next"></a>
    </div>
    <div class="uk-position-center-right uk-position-medium" uk-inverse uk-toggle="cls: uk-position-center-right uk-position-bottom-center; mode: media; media: @s">
        <ul class="uk-lightbox-thumbnav uk-thumbnav uk-thumbnav-vertical" uk-toggle="cls: uk-thumbnav-vertical; mode: media; media: @s"></ul>
        <ul class="uk-lightbox-dotnav uk-dotnav uk-dotnav-vertical" uk-toggle="cls: uk-dotnav-vertical; mode: media; media: @s"></ul>
    </div>
    <div class="uk-lightbox-counter uk-text-large uk-position-top-left uk-position-small uk-transition-fade" uk-inverse></div>
    <div class="uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
</div>

要覆盖默认的灯箱模板,请将 `template: #ID` 选项添加到模板,以将其链接到具有新灯箱布局的 `template` 元素。

<template id="js-lightbox-template"></template>

<div uk-lightbox="template: #js-lightbox-template"></div>
<template id="js-lightbox-template">
    <div class="uk-lightbox uk-overflow-hidden">
        <div class="uk-lightbox-items"></div>
        <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
            <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
        </div>
        <div class="uk-position-bottom uk-position-medium uk-text-center uk-transition-fade" uk-inverse>
            <div class="uk-grid-small uk-width-auto uk-flex-inline uk-flex-middle" uk-grid>
                <div><a class="uk-lightbox-slidenav" href uk-slidenav-previous uk-lightbox-item="previous"></a></div>
                <div><div class="uk-lightbox-counter"></div></div>
                <div><a class="uk-lightbox-slidenav" href uk-slidenav-next uk-lightbox-item="next"></a></div>
            </div>
        </div>
    </div>
</template>

<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="template: #js-lightbox-template; counter: true">
    <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>

组件选项

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

选项 默认值 描述
动画 字符串 slide 灯箱动画模式(`slide`、`fade` 或 `scale`)。
自动播放 布尔值 false 灯箱自动播放。
自动播放间隔 数字 7000 自动播放模式下切换幻灯片之间的延迟时间。
悬停时暂停 布尔值 false 悬停时暂停自动播放模式。
视频自动播放 布尔值、字符串 false 灯箱视频自动播放。值为 `inline` 将自动播放视频,使其静音且不带控件。
计数器 布尔值 false 灯箱显示计数器。
导航 布尔值、字符串 false 灯箱导航(`dotnav`、`thumbnav`)。
幻灯片导航 布尔值 true 灯箱显示幻灯片导航控件。
索引 字符串、数字 0 要显示的灯箱项目。基于 0 的索引。
延迟控制 数字 3000 控件淡出之前的延迟时间(毫秒)。设置 `0` 将阻止隐藏控件。
切换器 CSS 选择器 a 切换选择器 - 单击时打开灯箱面板。

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);

显示灯箱的面板和项目。

隐藏

UIkit.lightbox(element).hide();

隐藏灯箱的面板。

如果您只想直接通过 JS API 使用灯箱面板,则可以设置以下选项。

选项 默认值 描述
动画 字符串 slide 灯箱动画模式(`slide`、`fade` 或 `scale`)。
自动播放 布尔值 false 灯箱自动播放。
自动播放间隔 数字 7000 自动播放模式下切换幻灯片之间的延迟时间。
悬停时暂停 布尔值 false 悬停时暂停自动播放模式。
视频自动播放 布尔值、字符串 false 灯箱视频自动播放。值为 `inline` 将自动播放视频,使其静音且不带控件。
计数器 布尔值 false 灯箱显示计数器。
导航 布尔值、字符串 false 灯箱导航(`dotnav`、`thumbnav`)。
幻灯片导航 布尔值 true 灯箱显示幻灯片导航控件。
索引 数字 0 要显示的初始项目。(从零开始)
速度 数字 2 动画速度(像素/毫秒)。
预加载 数字 1 要预加载的项目数。(当前活动项目的左侧和右侧)
项目 数组 [] 要显示的项目的数组,例如 `[{source: 'images/size1.jpg', caption: '900x600'}]`
模板 字符串 默认标记 模板字符串。
延迟控制 数字 3000 控件淡出之前的延迟时间(毫秒)。设置 `0` 将阻止隐藏控件。
容器 字符串 body 通过选择器定义目标容器,以指定灯箱应附加到 DOM 中的位置。

事件

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

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

方法

以下方法可用于该组件

显示

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

显示灯箱面板和项目。

名称 类型 默认值 描述
索引 字符串、数字 0 要显示的灯箱项目。基于 0 的索引。

隐藏

UIkit.lightboxPanel(element).hide();

隐藏灯箱面板。

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

启动灯箱的自动播放。

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

停止灯箱的自动播放。


无障碍访问

灯箱组件遵循 对话框(模态)WAI-ARIA 设计模式轮播图 WAI-ARIA 设计模式,并自动设置相应的 WAI-ARIA 角色、状态和属性。

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

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

键盘交互

可以使用以下键通过键盘访问灯箱画廊。

国际化

灯箱组件使用以下翻译字符串。了解有关 翻译组件 的更多信息。

默认值 描述
下一个 下一张幻灯片 下一张幻灯片按钮的 `aria-label`。
上一个 上一张幻灯片 上一张幻灯片按钮的 `aria-label`。
幻灯片标签 %s / %s 幻灯片的 `aria-label`。
关闭 关闭 关闭按钮的 `aria-label`。