在线咨询
联系我们
创建可包含图像和视频的响应式灯箱画廊。
灯箱组件具有完全的响应能力，并且支持触摸滑动和鼠标拖动切换方式。在幻灯片之间滑动时，动画会停留在您的指尖或鼠标光标处。快速单击上一个和下一个导航，.灯箱，可以使动画加快切换速度。所有动画都是硬件加速，以实现更平滑流畅的性能。
要应用此组件，请将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.
