# 灯箱/Lightbox 利用[模态对话框](modal.html)为图片和视频创建一个别致的灯箱。 ## 用法 要使用这个组件,添加 `data-uk-lightbox` 属性到一个链接到图片的锚文本中。如果title属性存在,它将会被显示为灯箱的标题。 注意 此组件需要额外添加 `lightbox.js` 文件,在`js/components`文件夹中。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3cd8735.jpg) ### Markup ``` <a href="my-image.jpg" data-uk-lightbox title="">...</a> ``` * * * ## 组/Groups 你可以链接多个图片到同一个灯箱中,并在灯箱内切换显示,就是一个画廊了。只需添加 `{group:'my-group'}` 选项到每个单元的data属性,并且每个单元使用同一个grou名称,以显示在同一个灯箱中。你需要确保你已经引入了 [滑动导航组件](slidenav.html) 的CSS,这样你才能在灯箱里切换显示各个单元。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3cefe60.jpg) ### Markup ``` <a href="" data-uk-lightbox="{group:'my-group'}">...</a> ``` * * * ## 不同的内容源 灯箱并不限于图片展示。其他的媒体,比如视频,也可以显示在灯箱中,它会通过判断路径自动生成能正常的输出效果。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3d40d87.jpg) * * * ### 内容类型 如果路径中没有文件扩展名,只需要添加 `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 | 灯箱显示时 |