灯箱/Lightbox

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

用法

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

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

Example

Open lightbox

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 选项

选项 可用值 默认值 描述
group string false 组名用来将元素分组,作为画廊进行展示。
duration integer 400 画廊切换内容时的动画持续时间。
keyboard boolean true 允许使用键盘翻页

手动初始化

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

事件

名称 参数 描述
showitem.uk.lightbox event, data 灯箱显示时