2018-11-14 19:47:19 +01:00
## Image
2018-05-08 03:20:39 +02:00
2018-04-15 06:27:30 +02:00
```js
2018-04-24 22:12:07 +02:00
const noop = () => {};
2018-05-02 00:37:21 +02:00
< div style = {{ position: ' relative ' , width: ' 100 % ' , height: 500 } } >
2018-04-15 08:28:14 +02:00
< Lightbox
2018-04-26 00:15:57 +02:00
objectURL="https://placekitten.com/800/600"
contentType="image/jpeg"
2018-04-24 22:12:07 +02:00
onSave={noop}
2018-05-22 21:31:43 +02:00
i18n={util.i18n}
2018-04-15 08:28:14 +02:00
/>
2018-05-02 00:37:21 +02:00
< / div > ;
2018-04-15 06:27:30 +02:00
```
2018-05-08 03:20:39 +02:00
2018-11-14 19:47:19 +01:00
## Image with caption
```js
const noop = () => {};
< div style = {{ position: ' relative ' , width: ' 100 % ' , height: 500 } } >
< Lightbox
objectURL="https://placekitten.com/800/600"
caption="This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image."
contentType="image/jpeg"
onSave={noop}
i18n={util.i18n}
/>
< / div > ;
```
2018-05-08 03:20:39 +02:00
## Image (unsupported format)
```js
const noop = () => {};
< div style = {{ position: ' relative ' , width: ' 100 % ' , height: 500 } } >
2018-05-22 21:31:43 +02:00
< Lightbox
objectURL="foo.tif"
contentType="image/tiff"
onSave={noop}
i18n={util.i18n}
/>
2018-05-08 03:20:39 +02:00
< / div > ;
```
## Video (supported format)
```js
const noop = () => {};
< div style = {{ position: ' relative ' , width: ' 100 % ' , height: 500 } } >
< Lightbox
objectURL="fixtures/pixabay-Soap-Bubble-7141.mp4"
contentType="video/mp4"
onSave={noop}
2018-05-22 21:31:43 +02:00
i18n={util.i18n}
2018-05-08 03:20:39 +02:00
/>
< / div > ;
```
## Video (unsupported format)
```js
const noop = () => {};
< div style = {{ position: ' relative ' , width: ' 100 % ' , height: 500 } } >
2018-05-22 21:31:43 +02:00
< Lightbox
objectURL="foo.mov"
contentType="video/quicktime"
onSave={noop}
i18n={util.i18n}
/>
2018-05-08 03:20:39 +02:00
< / div > ;
```
## Unsupported file format
```js
const noop = () => {};
< div style = {{ position: ' relative ' , width: ' 100 % ' , height: 600 } } >
< Lightbox
objectURL="tsconfig.json"
contentType="application/json"
onSave={noop}
2018-05-22 21:31:43 +02:00
i18n={util.i18n}
2018-05-08 03:20:39 +02:00
/>
< / div > ;
```