# 燈箱/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 | 燈箱顯示時 |