[](https://www.jsdelivr.com/package/gh/tobiasroeder/ImageBox)
# ImageBox Documentation
[](https://github.com/tobiasroeder/ImageBox/releases/tag/1.3.2)
[](https://github.com/tobiasroeder/ImageBox/issues)
[](https://github.com/tobiasroeder/ImageBox/blob/master/LICENSE)
[](https://www.jsdelivr.com/package/gh/tobiasroeder/ImageBox)
---
### Include this files:
```html
```
---
### If IE support is needed:
```html
```
> Currently only version 1.2.0 is available.
> _Since 1.3.0 is the support dropped._
---
### How it works:
add to the `` tag the following attributes:
- `data-imagebox` _(single image)_
- `data-imagebox="gallery"` _(gallery)_
- `data-imagebox-src="img_big.jpg"` _(voluntary, else it use the src attribute)_
- `data-imagebox-caption="Lorem ipsum"`
### Small feature for the caption:
- `data-imagebox-caption="{loc} Lorem ipsum"` _(the {loc} will display a small location icon in the beginning)_
### Multiple galleries:
- `data-imagebox="gallery-ID"` _(each image with this attribute and this name is bundled to a gallery)_
### Options:
Parameter | Type | Default | Info
--- | --- | --- | ---
info | bool | false | Display an info about the ImageBox in the console.
swipeToChange | bool | true | Change between images in the gallery with a simple swipe (right/left).
swipeToClose | bool | true | Close the ImageBox (single image/gallery) (top/down).
keyControls | bool | true | `Esc` close ImageBox, `ArrowLeft` previous image, `ArrowRight` next image.
closeEverywhere | bool | true | Close the ImageBox everywhere (only single image).
htmlCaption | bool | false | Enable the ability to render HTML code in the caption.
autoInit | bool | true | Decide if the ImageBox will be automatically initialized.
#### Example:
```javascript
// not available in imagebox.ie.js (IE)
imagebox.options({
info: false,
swipeToChange: true,
swipeToClose: true,
keyControls: true,
closeEverywhere: true,
htmlCaption: false,
autoInit: true
});
```
---
### Examples:
single image
```html
```
gallery
```html
```
multiple galleries
```html
```
---
### Live example:
An live example can be found on CodePen. You can also play there with the ImageBox around.
- [https://codepen.io/tobiasroeder/pen/wZeBNL](https://codepen.io/tobiasroeder/pen/wZeBNL)
---
### Tested in:
Browser | Version | Known Issues
--- | --- | ---
Safari | 17.3.1 |
Safari (iOS) | 17.4.1 |
Chrome | 123.0.6312.87 (arm64) |
Opera | 109.0.5097.35 (arm64) |
Firefox | 124.0.1 (64-Bit) |
Microsoft Edge | 123.0.2420.65 (arm64) |
Arc | 1.36.0 |
> imagebox.css & imagebox.js (v1.3.2)
---
### [Try it yourself](https://codepen.io/tobiasroeder/pen/wZeBNL)
```
gallery
```html
```
---
### Live example:
An live example can be found on CodePen. You can also play there with the ImageBox around.
- [https://codepen.io/tobiasroeder/pen/wZeBNL](https://codepen.io/tobiasroeder/pen/wZeBNL)
---
### Tested in:
Browser | Version | Known Issues
--- | --- | ---
Safari | 17.3.1 |
Safari (iOS) | 17.4.1 |
Chrome | 123.0.6312.87 (arm64) |
Opera | 109.0.5097.35 (arm64) |
Firefox | 124.0.1 (64-Bit) |
Microsoft Edge | 123.0.2420.65 (arm64) |
Arc | 1.36.0 |
> imagebox.css & imagebox.js (v1.3.2)
---
### [Try it yourself](https://codepen.io/tobiasroeder/pen/wZeBNL)