跳到主要內容

文件

燈箱

建立具有圖片和影片的響應式燈箱畫廊。

燈箱組件是完全響應式的，並支援觸控和滑動導航，以及桌面的滑鼠拖曳。在幻燈片之間滑動時，動畫會確實跟隨您的手指或滑鼠游標。快速點擊上一個和下一個導航，動畫甚至會加速以跟上您的速度。所有動畫都經過硬體加速，以獲得更流暢的效能。

用法

若要應用此組件，請將 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 屬性新增至 <a> 標籤。

提示 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>

組件選項

這些選項中的任何一個都可以應用到組件屬性。使用分號分隔多個選項。 深入瞭解

選項 值 預設值 描述
animation 字串 slide 燈箱動畫模式（slide、fade 或 scale）。
autoplay 布林值 false 燈箱自動播放。
autoplay-interval 數字 7000 在自動播放模式下切換幻燈片之間的延遲時間。
pause-on-hover 布林值 false 在滑鼠懸停時暫停自動播放模式。
video-autoplay 布林值、字串 false 燈箱影片自動播放。值為 inline 將會自動播放影片、使其靜音且沒有控制項。
counter 布林值 false 燈箱顯示計數器。
nav 布林值、字串 false 燈箱導航（dotnav、thumbnav）。
slidenav 布林值 true 燈箱顯示幻燈片導航控制項。
index 字串、數字 0 要顯示的燈箱項目。從 0 開始的索引。
delay-controls 數字 3000 控制項淡出前的延遲時間 (毫秒)。設定 0 將會防止隱藏控制項。
toggle 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 直接使用燈箱面板，您可以設定下列選項。

選項 值 預設值 描述
animation 字串 slide 燈箱動畫模式（slide、fade 或 scale）。
autoplay 布林值 false 燈箱自動播放。
autoplay-interval 數字 7000 在自動播放模式下切換幻燈片之間的延遲時間。
pause-on-hover 布林值 false 在滑鼠懸停時暫停自動播放模式。
video-autoplay 布林值、字串 false 燈箱影片自動播放。值為 inline 將會自動播放影片、使其靜音且沒有控制項。
counter 布林值 false 燈箱顯示計數器。
nav 布林值、字串 false 燈箱導航（dotnav、thumbnav）。
slidenav 布林值 true 燈箱顯示幻燈片導航控制項。
index 數字 0 要顯示的初始項目。（從零開始）
velocity 數字 2 動畫速度 (像素/毫秒)。
preload 數字 1 要預先載入的項目數。（目前活動項目的左側和右側）
items 陣列 [] 要顯示的項目陣列，例如 [{source: 'images/size1.jpg', caption: '900x600'}]
template 字串 預設標記 樣板字串。
delay-controls 數字 3000 控制項淡出前的延遲時間 (毫秒)。設定 0 將會防止隱藏控制項。
container 字串 body 透過選擇器定義目標容器，以指定應該將燈箱附加到 DOM 中的位置。

事件

以下事件將在附加此組件的元素上觸發

名稱 描述
beforeshow 在顯示燈箱之前觸發。
beforehide 在隱藏燈箱之前觸發。
show 在顯示燈箱之後觸發。
shown 在燈箱的顯示動畫完成之後觸發。
hide 在燈箱的隱藏動畫開始之後觸發。
hidden 在燈箱隱藏之後觸發。
itemload 在項目載入時觸發。
beforeitemshow 在顯示項目之前觸發。
itemshow 在顯示項目之後觸發。
itemshown 在項目的顯示動畫完成之後觸發。
beforeitemhide 在隱藏項目之前觸發。
itemhide 在項目的隱藏動畫開始之後觸發。
itemhidden 在項目的隱藏動畫完成之後觸發。

方法

以下方法可用於組件

顯示

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

顯示燈箱面板和項目。

名稱 類型 預設值 描述
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 角色和屬性。

鍵盤互動

可以使用以下按鍵透過鍵盤操作燈箱藝廊。

國際化

燈箱元件使用以下翻譯字串。了解更多關於翻譯元件的資訊。

鍵 預設值 描述
next 下一張幻燈片 下一個幻燈片按鈕的 aria-label。
previous 上一張幻燈片 上一個幻燈片按鈕的 aria-label。
slideLabel %s / %s 幻燈片的 aria-label。
close 關閉 關閉按鈕的 aria-label。