灯箱/Lightbox

利用模态对话框为图片和视频创建一个别致的灯箱。

用法

要使用这个组件，添加 data-uk-lightbox 属性到一个链接到图片的锚文本中。如果title属性存在，它将会被显示为灯箱的标题。

注意 此组件需要额外添加 lightbox.js 文件，在js/components文件夹中。

Example

Markup

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

组/Groups

你可以链接多个图片到同一个灯箱中，并在灯箱内切换显示，就是一个画廊了。只需添加 {group:'my-group'} 选项到每个单元的data属性，并且每个单元使用同一个grou名称，以显示在同一个灯箱中。你需要确保你已经引入了 滑动导航组件 的CSS，这样你才能在灯箱里切换显示各个单元。

Example

Markup

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

不同的内容源

灯箱并不限于图片展示。其他的媒体，比如视频，也可以显示在灯箱中，它会通过判断路径自动生成能正常的输出效果。

Example

Image MP4 Vimeo YouTube

内容类型

如果路径中没有文件扩展名，只需要添加 data-lightbox-type="image" 属性，视频就能正常播放了。

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();
                            

事件