# Media

> Lightbox for enlarge-on-click images.

## Lightbox

Media components handle large objects such as images. For responsive images and videos without JavaScript, see [Media Styles](/media-css.html.md).

### Lightbox

Lightbox is Expressive’s material-style enlarge-on-click image. Click an image with `lightboxed` and it centers and grows. Click it again, scroll, or press Escape to dismiss. The image keeps the same 12px corners as `responsive-img`. `AutoInit()` starts every `.lightboxed` image except those marked `no-autoinit`.

![A mountain lake that opens in a lightbox](https://picsum.photos/id/1015/800/400)

```
<img class="lightboxed" tabindex="0" role="button" width="650" alt="A mountain lake" src="images/sample-1.jpg">
```

#### Initialization

```
document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.lightboxed');
  const instances = Expressive.Lightbox.init(elems, {
    // specify options here
  });
});
```

#### Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `inDuration` | Number | `275` | Open transition duration, in milliseconds. |
| `outDuration` | Number | `200` | Close transition duration, in milliseconds. |
| `onOpenStart` | Function | `null` | Called before the lightbox opens. |
| `onOpenEnd` | Function | `null` | Called after the lightbox opens. |
| `onCloseStart` | Function | `null` | Called before the lightbox closes. |
| `onCloseEnd` | Function | `null` | Called after the lightbox closes. |

#### Methods

> All methods are called on the plugin instance. You can get the instance like this:

```
const instance = Expressive.Lightbox.getInstance(elem);
```

#### .open();

Open the lightbox.

```
instance.open();
```

#### .close();

Close the lightbox.

```
instance.close();
```

#### .destroy();

Destroy the plugin instance and tear down its event handlers.

```
instance.destroy();
```

#### Properties

| Name | Type | Description |
| --- | --- | --- |
| `el` | Element | The DOM element the plugin was initialized with. |
| `options` | Object | The options the instance was initialized with. |
| `overlayActive` | Boolean | Whether the lightbox overlay is showing. |
| `doneAnimating` | Boolean | Whether the open or close animation has finished. |
| `caption` | String | Caption text, if specified. |
| `originalWidth` | Number | Original width of the image. |
| `originalHeight` | Number | Original height of the image. |

#### Captions

Add a short caption with the `data-caption` attribute.

![A path through trees](https://picsum.photos/id/1016/800/400)

```
<img class="lightboxed" tabindex="0" role="button"
     data-caption="A path through trees in a park"
     width="250"
     alt="A path through trees"
     src="images/sample-2.jpg">
```