灯箱

使用 模态框组件 为图像和视频创建一个精美的灯箱。

用法

要应用此组件，请将 data-uk-lightbox 属性添加到链接到要显示的图像的锚点。如果存在标题属性，它将显示为灯箱的标题。

示例

标记

<a href="my-image.jpg" data-uk-lightbox title="">...</a>

分组

您可以将多个图像链接到同一个灯箱，并在灯箱内切换它们，从而创建一个图库。只需将 {group:'my-group'} 选项添加到每个项目的数据属性中，并在所有要分组的项目上使用相同的名称。确保包含 滑动导航组件 中的 CSS，以便您可以在项目之间导航。

示例

标记

<a href="" data-uk-lightbox="{group:'my-group'}">...</a>

不同的内容来源

灯箱不限于图像。其他媒体（如视频）也可以在灯箱内显示，它会通过评估您的路径自动生成正确的输出。

示例

图像 MP4 Vimeo YouTube Iframe

内容类型

如果在图像路径中未定义文件名扩展名，只需添加 data-lightbox-type="image" 属性。这对于视频也适用。对于以 .html 或 .php 结尾的 URL，将自动检测到 iframe 内容类型。要强制使用 iframe，请添加 data-lightbox-type="iframe" 属性。

JavaScript 选项

手动初始化元素

var lightbox = UIkit.lightbox(element, { /* options */ });

创建动态灯箱

                                var lightbox = UIkit.lightbox.create([
                                    {'source': 'http://url/to/video.mp4', 'type':'video'},
                                    {'source': 'http://url/to/image.jpg', 'type':'image'}
                                ]);

                                lightbox.show();
                            

事件