tr-imagebox v1.0.0

ImageBox Documentation

Include this files:

<link rel="stylesheet" type="text/css" href="https://tobiasroeder.github.io/imagebox/{version}/imagebox.min.css">
<script src="https://tobiasroeder.github.io/imagebox/{version}/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)

How to 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-description="Lorem ipsum"

Small feature for the description:

data-imagebox-description="{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

Example:

minimal (single image)

<img src="img_small.jpg" data-imagebox>

maximal (single image)

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

minimal (gallery)

<img src="img_small.jpg" data-imagebox="gallery">

maximal (gallery)

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

addimagebox

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

Full example here: https://tobiasroeder.github.io/imagebox#example. Try it Yourself