燈箱(社區(qū)宣傳欄Lightbox) 發(fā)布時(shí)間: 創(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.