創(chuàng)建可包含圖像和視頻的響應(yīng)式燈箱畫廊。

燈箱組件具有完全的響應(yīng)能力，并且支持觸摸滑動(dòng)和鼠標(biāo)拖動(dòng)切換方式。在幻燈片之間滑動(dòng)時(shí)，動(dòng)畫會(huì)停留在您的指尖或鼠標(biāo)光標(biāo)處?？焖賳螕羯弦粋€(gè)和下一個(gè)導(dǎo)航，.燈箱，可以使動(dòng)畫加快切換速度。所有動(dòng)畫都是硬件加速，以實(shí)現(xiàn)更平滑流暢的性能。

要應(yīng)用此組件，請將uk-lightbox屬性添加到容器，以將該容器內(nèi)的所有錨點(diǎn)轉(zhuǎn)換為燈箱鏈接。

<div uk-lightbox> <a href="image.jpg"></a> </div>

如果要向lightbox中的圖像添加altalt屬性，請?jiān)阱^點(diǎn)上設(shè)置data-alt屬性。

<div uk-lightbox> <a href="image.jpg" data-alt="Image"></a> </div>

若要在燈箱底部顯示標(biāo)題，請?jiān)阱^點(diǎn)上設(shè)置data-caption屬性。

<div uk-lightbox> <a href="image.jpg" data-caption="Caption"></a> </div>

默認(rèn)情況下，燈箱圖庫使用slide動(dòng)畫。您可以將animation 選項(xiàng)設(shè)置為其他動(dòng)畫方式，路燈燈箱，可選的值slide, fade 和 scale。

<div uk-lightbox="animation: fade"> <a href="image.jpg"></a> </div>

燈箱不僅僅是可以使用圖片，其他媒體格式，滾動(dòng)廣告燈箱，比如視頻也可以作為燈箱顯示。視頻在視口范圍之外時(shí)會(huì)自動(dòng)暫停，戶外廣告燈箱，在再次進(jìn)入視口之后會(huì)自動(dòng)繼續(xù)播放。要顯示視頻的預(yù)覽圖，請?jiān)O(shè)置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.

燈箱根據(jù)href屬性來確定鏈接內(nèi)容的類型。如果在路徑中未定義文件擴(kuò)展名，需要將data-type屬性添加到<a>標(biāo)簽中。

Hint YouTube and Vimeo Urls will be handled automatically.