使用图片和视频创建一个响应式的灯箱画廊。
灯箱组件是完全响应式的,支持触摸和滑动导航,以及桌面的鼠标拖动。在幻灯片之间滑动时,动画会真正地粘在您的指尖或鼠标光标上。快速点击上一个和下一个导航将使动画加速,以跟上您的节奏。所有动画都经过硬件加速,以获得更流畅的性能。
要应用此组件,请将 `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` 属性,请在锚点上设置 `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 组件 的更多信息。
// 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();
隐藏灯箱面板。
UIkit.lightboxPanel(element).startAutoplay();
启动灯箱的自动播放。
UIkit.lightboxPanel(element).stopAutoplay();
停止灯箱的自动播放。
灯箱组件遵循 对话框(模态)WAI-ARIA 设计模式 和 轮播图 WAI-ARIA 设计模式,并自动设置相应的 WAI-ARIA 角色、状态和属性。
上一个/下一个导航遵循 按钮模式。
关闭组件自动设置适当的 WAI-ARIA 角色和属性。
可以使用以下键通过键盘访问灯箱画廊。
灯箱组件使用以下翻译字符串。了解有关 翻译组件 的更多信息。
键 | 默认值 | 描述 |
---|---|---|
下一个 |
下一张幻灯片 |
下一张幻灯片按钮的 `aria-label`。 |
上一个 |
上一张幻灯片 |
上一张幻灯片按钮的 `aria-label`。 |
幻灯片标签 |
%s / %s |
幻灯片的 `aria-label`。 |
关闭 |
关闭 |
关闭按钮的 `aria-label`。 |