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, fadescale

<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" 内容源是常规网页。

组件选项

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

Option Value Default Description
animation String slide 灯箱动画模式:slide, fadescale.
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, fadescale.
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 控件消失之前的延迟时间(以毫秒为单位)。

事件

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

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的自动播放。