Skip to content

Latest commit

 

History

History
126 lines (90 loc) · 3.81 KB

README.md

File metadata and controls

126 lines (90 loc) · 3.81 KB
Raw

ImageBox Documentation

Include this files:

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

If IE support is needed:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tobiasroeder/[email protected]/dist/imagebox.min.css">
<script src="https://cdn.jsdelivr.net/gh/tobiasroeder/[email protected]/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.

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