Display An Image In A Responsive Imagebox Without jQuery

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)

Multiple Galleries

data-imagebox=”gallery-ID” (each image with this attribute and this name is bundled to a gallery).

[Redwood] A Custom Modal With a Lightbox Slideshow In jQuery

How to make use of it:

Import the ImageBox’s JavaScript and CSS information into the doc.

<link href="css/imagebox.css" rel="stylesheet">
<script src="js/imagebox.js"></script>
<!-- For IE & Edge -->
<script src="js/imagebox.ie.min.js"></script>

To create a single picture lightbox, simply add the attribute to the img tag and achieved.

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

To show a number of photos within the lightbox, add the data-imagebox="gallery" attribute to the photographs.

<img src="image1.jpg" data-imagebox data-imagebox="gallery">
<img src="image2.jpg" data-imagebox data-imagebox="gallery">
<img src="image3.jpg" data-imagebox data-imagebox="gallery">

Sometimes you would possibly show the massive model of the picture within the lightbox.

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

You can even outline the picture description within the data-imagebox-description attribute:

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

A full instance:

<img src="https://source.unsplash.com/lQL-CpBxuD8/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/lQL-CpBxuD8/1200x900" data-imagebox-caption="CSSSCRIPT.COM">

<img src="https://source.unsplash.com/-djRG1vB1pw/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/-djRG1vB1pw/1200x900" data-imagebox-caption="CSSSCRIPT.COM">

<img src="https://source.unsplash.com/Pdbm_hkG0wE/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/Pdbm_hkG0wE/1200x900" data-imagebox-caption="CSSSCRIPT.COM">

Display Grouped Images In A Lightbox, ImageBox Plugin/Github

See Demo And Download