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

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

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

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

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

Example

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

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

Example

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

选项 可用值 默认值 描述
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   灯箱显示时