UIkit3.x文档

灯箱

创建可包含图像和视频的响应式灯箱画廊。

灯箱组件具有完全的响应能力，并且支持触摸滑动和鼠标拖动切换方式。在幻灯片之间滑动时，动画会停留在您的指尖或鼠标光标处。快速单击上一个和下一个导航，可以使动画加快切换速度。所有动画都是硬件加速，以实现更平滑流畅的性能。

用法

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

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

Alt 属性

如果要向lightbox中的图像添加altalt属性，请在锚点上设置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="/skin/ukv3/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="/skin/ukv3/images/photo.jpg" data-caption="Caption">Open Lightbox</a>
</div>

动画

默认情况下，灯箱图库使用slide动画。您可以将animation 选项设置为其他动画方式，可选的值slide, fade 和 scale。 

<div uk-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>
  • Slide
    Fade
    Scale
  • <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="/skin/ukv3/images/photo.jpg" data-caption="Caption 1">
            <img src="/skin/ukv3/images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/skin/ukv3/images/dark.jpg" data-caption="Caption 2">
            <img src="/skin/ukv3/images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/skin/ukv3/images/light.jpg" data-caption="Caption 3">
            <img src="/skin/ukv3/images/light.jpg" 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="/skin/ukv3/images/photo.jpg" data-caption="Caption 1">
            <img src="/skin/ukv3/images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/skin/ukv3/images/dark.jpg" data-caption="Caption 2">
            <img src="/skin/ukv3/images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/skin/ukv3/images/light.jpg" data-caption="Caption 3">
            <img src="/skin/ukv3/images/light.jpg" 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="/skin/ukv3/images/photo.jpg" data-caption="Caption 1">
            <img src="/skin/ukv3/images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/skin/ukv3/images/dark.jpg" data-caption="Caption 2">
            <img src="/skin/ukv3/images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="/skin/ukv3/images/light.jpg" data-caption="Caption 3">
            <img src="/skin/ukv3/images/light.jpg" 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="/skin/ukv3/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>

Note Use youtube-nocookie.com within the YouTube link and the lightbox will use the domain to embed the YouTube video.

手动设置内容源类型

灯箱根据href属性来确定链接内容的类型。如果在路径中未定义文件扩展名，需要将data-type属性添加到<a>标签中。

Hint YouTube and Vimeo Urls will be handled automatically.

Option Description
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>

组件选项

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

Option Value Default Description
animation String slide 灯箱动画模式：slide, fade 或 scale.
autoplay Number 0 灯箱自动切换。（以毫秒为单位）
autoplay-interval Number 0 在自动切换模式下切换幻灯片之间的延迟时间。
pause-on-hover Boolean false 鼠标悬停时暂停切换。
video-autoplay Boolean false 灯箱影片自动播放。
index String, Integer 0 要显示的灯箱项目。从0开始的索引。
toggle CSS selector 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使用灯箱面板，则可以设置以下选项。

Option Value Default Description
animation String slide 灯箱动画模式：slide, fade 或 scale.
autoplay Boolean false 灯箱自动切换。
autoplay-interval Number 7000 在自动切换模式下切换幻灯片之间的延迟。
pause-on-hover Boolean false 鼠标悬停时暂停自动切换模式。
video-autoplay Boolean false 灯箱视频自动播放。
index Number 0 要显示的初始项目。（从零开始）
velocity Number 2 动画速度（像素/毫秒）。
preload Number 1 要预加载的项目数。（当前活动项的左侧和右侧）
items Array [] 要显示的项目数组，例如[{source: 'images/size1.jpg', caption: '900x600'}]
template String Default markup 模板字符串。
delay-controls Number 3000 控件消失之前的延迟时间（以毫秒为单位）。
container String body 通过选择器定义目标容器，以指定将Lightbox附加在DOM中的位置。

事件

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

Name Description
beforeshow 在显示灯箱之前触发。
beforehide 在隐藏灯箱之前触发。
show 显示灯箱后触发
shown 灯箱的放映动画完成后触发。
hide 在灯箱的隐藏动画开始后触发。
hidden 灯箱隐藏后触发。
itemload 项目加载时触发。
beforeitemshow 在显示项目之前触发。
itemshow 显示一个项目后触发。
itemshown 项目的显示动画完成后触发。
beforeitemhide 在隐藏项目之前触发。
itemhide 在项目的隐藏动画开始后触发。
itemhidden 项目的隐藏动画完成后触发。

方法

以下方法可用于该组件：

显示 


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

显示灯箱面板和项目。

Name Type Default Description
index String, Integer 0 显示的灯箱项目。从0开始的索引。

隐藏 


UIkit.lightboxPanel(element).hide();

隐藏灯箱面板。

startAutoplay 


UIkit.lightboxPanel(element).startAutoplay();

启动Lightbox的自动播放。

stopAutoplay 


UIkit.lightboxPanel(element).stopAutoplay();

停止Lightbox的自动播放。