Documentation

ImageBox latest version 0.0.0

Include this files:

<link rel="stylesheet" type="text/css" 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.min.js"></script>

OR:

<script src="https://tobiasroeder.github.io/imagebox/addimagebox.js"></script>

(this file will include the newest version from all files which are needed)

If IE support is needed:

<link rel="stylesheet" type="text/css" 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>

OR:

<script src="https://tobiasroeder.github.io/imagebox/addimagebox.js" data-addimagebox="ie"></script>

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 an small location icon in the beginning

addImageBox:

add to the <script> tag the following attribute:

data-addimagebox-version="1.0.0"
optional otherwise it will use the newest version

Options:

// imagebox.js
imagebox.options({
    info: true;	// or false
});

// imagebox.ie.js (only Edge Browser)
imageboxOptions({
    info: true;	// or false
});

Example:

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

addimagebox

<script src="https://tobiasroeder.github.io/imagebox/addimagebox.js" data-addimagebox-version="1.2.0"></script>

Live example (single image):

Live example (gallery):

Tested in:

imagebox.js	Safari	Safari iOS	Firefox	Opera
	13.0.5	13.3.1	74.0	67.0.3575.79

imagebox.ie.js	IE11	Edge
	11.726.16299.0	41.16299.726.0

Difference between imagebox.js and imagebox.ie.js:

In imagebox.js is the imagebox an object with init, finder, options, open, close, switch, prev, next and caption methods. The IE11 and Edge Browser doesn't support objects, thats why each method is a single function. In the imagebox.ie.js the imageboxOptions function was removed because it only caused problems.

With ImageBox v1.2.0 it's possible to close the imagebox with the 'Esc' button, but in imagebox.js it's checked with event.code == 'Escape' and in imagebox.ie.js with event.key == 'Esc'.