创建可包含图像和视频的响应式灯箱画廊。
灯箱组件具有完全的响应能力,并且支持触摸滑动和鼠标拖动切换方式。在幻灯片之间滑动时,动画会停留在您的指尖或鼠标光标处。快速单击上一个和下一个导航,.灯箱,可以使动画加快切换速度。所有动画都是硬件加速,以实现更平滑流畅的性能。
要应用此组件,请将uk-lightbox属性添加到容器,以将该容器内的所有锚点转换为灯箱链接。
<div uk-lightbox> <a href="image.jpg"></a> </div>
如果要向lightbox中的图像添加altalt属性,请在锚点上设置data-alt属性。
<div uk-lightbox> <a href="image.jpg" data-alt="Image"></a> </div>
若要在灯箱底部显示标题,请在锚点上设置data-caption属性。
<div uk-lightbox> <a href="image.jpg" data-caption="Caption"></a> </div>
默认情况下,灯箱图库使用slide动画。您可以将animation 选项设置为其他动画方式,路灯灯箱,可选的值slide, fade 和 scale。
<div uk-lightbox="animation: fade"> <a href="image.jpg"></a> </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.