Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
March 5, 2023 01:20
March 29, 2021 22:12
March 5, 2023 00:47
March 5, 2023 01:20


ImageBox latest version 1.3.1

Include this files:

<link rel="stylesheet" href="">
<script src=""></script>

If IE support is needed:

<link rel="stylesheet" href="">
<script src=""></script>

Currently only version 1.2.0 available

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)


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.


// not available in (IE)
  info: false,
  swipeToChange: true,
  swipeToClose: true,
  keyControls: true,
  closeEverywhere: true,
  htmlCaption: false,
  autoInit: true


single image

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


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

Tested in:

Browser Version Known Issues
Safari 16.2
Safari (iOS) 16.3.1
Chrome 110.0.5481.178
Opera 96.0.4693.31
Firefox 110.0.1
Microsoft Edge 110.0.1587.63

imagebox.css & imagebox.js (v1.3.1)

Try it yourself