Press "Enter" to skip to content

Display An Image In A Responsive Imagebox Without jQuery

ImageBox is a lightweight JavaScript plugin for displaying single images or collage images in a responsive lightbox.

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

Official Website(tobiasroeder): Click Here

This superior jQuery/javascript plugin is developed by tobiasroeder. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.