灯箱／Lightbox

# 灯箱／Lightbox

<p class="uk-text-lead">创建可包含图像和视频的响应式灯箱画廊。</p>

灯箱组件具有完全的响应能力，并且支持触摸滑动和鼠标拖动切换方式。在幻灯片之间滑动时，动画会停留在您的指尖或鼠标光标处。快速单击上一个和下一个导航，可以使动画加快切换速度。所有动画都是硬件加速，以实现更平滑流畅的性能。

## Usage-用法

要应用此组件，请将 `uk-lightbox` 属性添加到容器，以将该容器内的所有锚点转换为灯箱链接。

```html
<div uk-lightbox>
    <a href="image.jpg"></a>
</div>
```

```example
<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg">Open Lightbox</a>
</div>
```

***

## Alt Attribute-Alt 属性

如果要向lightbox中的图像添加 `alt` 属性，请在锚点上设置 `data-alt` 属性。

```html
<div uk-lightbox>
    <a href="image.jpg" data-alt="Image"></a>
</div>
```

```example
<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-alt="Image">Open Lightbox</a>
</div>
```

***

## Caption-描述文字

若要在灯箱底部显示标题，请在锚点上设置 `data-caption` 属性。

```html
<div uk-lightbox>
    <a href="image.jpg" data-caption="Caption"></a>
</div>
```

```example
<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Caption">Open Lightbox</a>
</div>
```

***

## Animations-动画

默认情况下，灯箱图库使用slide动画。您可以将 `animation` 选项设置为其他动画方式，可选的值 `slide`, `fade` 和 `scale`。

```html
<div uk-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>
```

```example
<div class="uk-h3">Slide</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Fade</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Scale</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: scale">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" alt="">
        </a>
    </div>
</div>
```

***

## Content sources-内容源

灯箱不仅仅是可以使用图片，其他媒体格式，比如视频也可以作为灯箱显示。视频在视口范围之外时会自动暂停，在再次进入视口之后会自动继续播放。要显示视频的预览图，请设置 `data-poster` 属性。

```html
<div uk-lightbox>
    <a class="uk-button" href="video.mp4" data-poster="image.jpg"></a>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA"></a>
    <a class="uk-button" href="https://vimeo.com/1084537"></a>
    <a class="uk-button" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Baidu Maps"></a>
</div>
```

```example
<div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Image">Image</a>
    <a class="uk-button uk-button-default" href="images/yootheme-pro.mp4" data-caption="Video">Video</a>
    <!-- <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-caption="YouTube">YouTube</a> -->
    <a class="uk-button uk-button-default" href="https://player.youku.com/embed/XNDIyNjI2MjQ3Mg==" data-caption="YouKu">YouKu</a>
    <!-- <a class="uk-button uk-button-default" href="https://vimeo.com/1084537" data-caption="Vimeo">Vimeo</a> -->
    <a class="uk-button uk-button-default" href="https://works.gaiamount.com/works/player/105346" data-caption="gaiamount">又唱太湖美</a>
    <!-- <a class="uk-button uk-button-default" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Google Maps" data-type="iframe">Google Maps</a> -->
    <a class="uk-button uk-button-default" href="https://map.baidu.com/search//@13523267.75,3641158.48,10z?querytype=s&c=127&pn=0&device_ratio=1&da_src=shareurl" data-caption="Baidu Maps" data-type="iframe">Baidu Maps</a>
</div>
```

**注意** 在YouTube链接中使用 `youtube-nocookie.com` ，灯箱将使用该域嵌入YouTube视频。

***

###  手动设置内容源类型

灯箱根据 `href` 属性来确定链接内容的类型。如果在路径中未定义文件扩展名，需要将 `data-type` 属性添加到 `<a>` 标签中。

**提示** YouTube和Vimeo Urls将自动处理。

| 选项               | 描述                            |
|:---------------------|:---------------------------------------|
| `data-type="image"`  | 内容源是图像          |
| `data-type="video"`  | 内容源是视频           |
| `data-type="iframe"` | 内容源是常规网页。 |

***

## Custom Attributes-自定义属性

可以使用 `data-attrs` 属性将自定义属性添加到lightbox灯箱的内容项。属性的传递方式与通常的组件选项类似，例如 `data-attrs="width: 1280; height: 720;"`

```html
<div uk-lightbox>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-attrs="width: 1280; height: 720;"></a>
</div>
```

```example
<div uk-lightbox>
    <a class="uk-button uk-button-default" href="https://player.youku.com/embed/XNDIyNjI2MjQ3Mg==" data-caption="YouTube" data-attrs="width: 1020; height: 998;">YouKu</a>
</div>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项 [了解更多](javascript.md#component-configuration)

### 灯箱

| 选项              | 可用值           | 默认值 | 描述                                          |
|:--------------------|:----------------|:--------|:-----------------------------------------------------|
| `animation`         | String          | `slide` | 灯箱动画模式： `slide`, `fade` 或 `scale`. |
| `autoplay`          | Number          | `0`     | 灯箱自动切换。（以毫秒为单位）          |
| `autoplay-interval` | Number          | `0`     | 在自动切换模式下切换幻灯片之间的延迟时间。 |
| `pause-on-hover`    | Boolean         | false   | 鼠标悬停时暂停切换。                       |
| `video-autoplay`    | Boolean         | false   | 灯箱影片自动播放。                           |
| `index`             | String, Integer | 0       | 要显示的灯箱项目。从0开始的索引。                |
| `toggle`            | CSS selector    | `a`     | 切换选择器-单击打开灯箱面板。 |

***

## JavaScript

了解更多 [JavaScript 组件](javascript.md#programmatic-use)的信息。

### Initialization／初始化

```js
// To apply lightbox to a group of links
UIkit.lightbox(element, options);

// To dynamically initialize the lightbox panel
UIkit.lightboxPanel(panelOptions);
```

### Methods／方法

以下方法可用于该组件：

#### Show／显示

```js
UIkit.lightbox(element).show(index);
```

显示灯箱面板和项目。

#### Hide／隐藏

```js
UIkit.lightbox(element).hide();
```

隐藏灯箱面板。

### 灯箱面板选项

如果您想直接通过JS API使用灯箱面板，则可以设置以下选项。

| 选项              | 可用值   | 默认值        | 描述                                                                 |
|:--------------------|:--------|:---------------|:------------------------------------|
| `animation`         | String  | `slide`        | 灯箱动画模式： `slide`, `fade` 或 `scale`                      |
| `autoplay`          | Boolean  | `false`       | 灯箱自动切换                                         |
| `autoplay-interval` | Number  | `7000`            | 在自动切换模式下切换幻灯片之间的延迟   |
| `pause-on-hover`    | Boolean | `false`          | 鼠标悬停时暂停自动切换模式                         |
| `video-autoplay`    | Boolean | `false`          | 灯箱视频自动播放          |
| `index`             | Number  | `0`            | 要显示的初始项目。（从零开始）                   |
| `velocity`          | Number  | `2`            | 动画速度（像素/毫秒）     |
| `preload`           | Number  | `1`            | 要预加载的项目数。（当前活动项的左侧和右侧）   |
| `items`             | Array   | `[]`           | 要显示的项目数组，例如 `[{source: 'images/size1.jpg', caption: '900x600'}]` |
| `template`          | String  | Default markup | 模板字符串。                      |
| `delay-controls`    | Number  | `3000`         | 控件消失之前的延迟时间（以毫秒为单位）              |
| `container` | String | `body` | 通过选择器定义目标容器，以指定将Lightbox附加在DOM中的位置 |

### Events／事件

将在附加了此组件的元素上触发以下事件:

| Name             | 描述                                              |
|:-----------------|:---------------------------------------------------------|
| `beforeshow`     | 在显示灯箱之前触发                      |
| `beforehide`     | 在隐藏灯箱之前触发                     |
| `show`           | 显示灯箱后触发                       |
| `shown`          | 灯箱的放映动画完成后触发 |
| `hide`           | 在灯箱的隐藏动画开始后触发   |
| `hidden`         | 灯箱隐藏后触发                      |
| `itemload`       | 项目加载时触发                                |
| `beforeitemshow` | 在显示项目之前触发                           |
| `itemshow`       | 显示一个项目后触发                            |
| `itemshown`      | 项目的显示动画完成后触发      |
| `beforeitemhide` | 在隐藏项目之前触发                          |
| `itemhide`       | 在项目的隐藏动画开始后触发        |
| `itemhidden`     | 项目的隐藏动画完成后触发     |

### Methods／方法

以下方法可用于该组件:

#### Show／显示

```js
UIkit.lightboxPanel(element).show(index);
```

显示灯箱面板和项目

| Name    | 类型            | 默认值 | 描述                           |
|:--------|:----------------|:--------|:--------------------------------------|
| `index` | String, Integer | 0       | 显示的灯箱项目。从0开始的索引 |

#### Hide／隐藏

```js
UIkit.lightboxPanel(element).hide();
```

隐藏灯箱面板。

#### startAutoplay

```js
UIkit.lightboxPanel(element).startAutoplay();
```

启动Lightbox的自动播放。

#### stopAutoplay

```js
UIkit.lightboxPanel(element).stopAutoplay();
```

停止Lightbox的自动播放。