# 灯箱/Lightbox 利用[模态对话框](modal.html)为图片和视频创建一个别致的灯箱。 ## 用法 要使用这个组件，添加 `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名称，以显示在同一个灯箱中。你需要确保你已经引入了 [滑动导航组件](slidenav.html) 的CSS，这样你才能在灯箱里切换显示各个单元。 ### Example  ### Markup ``` <a href="" data-uk-lightbox="{group:'my-group'}">...</a> ``` * * * ## 不同的内容源 灯箱并不限于图片展示。其他的媒体，比如视频，也可以显示在灯箱中，它会通过判断路径自动生成能正常的输出效果。 ### Example  * * * ### 内容类型 如果路径中没有文件扩展名，只需要添加 `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 | 灯箱显示时 |