ImageBox Documentation

---

Include this files:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tobiasroeder/imagebox@1.3.2/dist/imagebox.min.css">
<script src="https://cdn.jsdelivr.net/gh/tobiasroeder/imagebox@1.3.2/dist/imagebox.min.js"></script>

---

If IE support is needed:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tobiasroeder/imagebox@1.2.0/dist/imagebox.min.css">
<script src="https://cdn.jsdelivr.net/gh/tobiasroeder/imagebox@1.2.0/dist/imagebox.ie.min.js"></script>

Currently only version 1.2.0 is available. Since 1.3.0 is the support dropped.

---

How it works:

add to the <img> 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:

// 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

<img src="img_small.jpg" data-imagebox data-imagebox-src="img_big.jpg" data-imagebox-caption="Lorem ipsum">

gallery

<img src="img_small.jpg" data-imagebox="gallery" data-imagebox-src="img_big.jpg" data-imagebox-caption="Lorem ipsum">

multiple galleries

<!-- Gallery 1 -->
<img src="img/san-francisco.jpg" alt="San Francisco" data-imagebox="g1">
<img src="img/new-york.jpg" alt="New York" data-imagebox="g1">

<!-- Gallery 2 -->
<img src="img/seattle.jpg" alt="Seattle" data-imagebox="g2">
<img src="img/detroit.jpg" alt="Detroit" data-imagebox="g2">

---

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

---

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