A jQuery lightbox built on the HTML5 data attribute
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.



A jQuery lightbox plugin built on HTML5. It uses the HTML5 data attribute to add a larger version of an image then displays that image in a simple modal lightbox.

How to use

  • Add jQuery (at least 1.7) and the plugin to your page.
  • Add a data-large-src attribute to the <img> element with the url of the larger version of your image.
  • Add the jQuery call to run the plugin on your images.
  • Click and enjoy.


<img src="http://placekitten.com/200/300" alt="kitteh!" 
width="200" height="300" 
data-large-src="http://placekitten.com/400/600" />

jQuery(function ($) {

The plugin will go through each img element on the page; if it has the data-large-src (or your own defined attribute) it will wrap that in a link that opens a modal lightbox when clicked.


This plugin is licensed under MIT. Have at it.


Morgan Estes

Grab the source and fork it


Bitdeli Badge