Simple HTML5 Lightbox Plugin with jQuery - h5-lightbox

File Size: 7.05 KB
Views Total: 5357
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple HTML5 Lightbox Plugin with jQuery - h5-lightbox

h5-lightbox is a jQuery plugin that displays/enlarges your images in a simple lightbox using HTML5 data- attribute.

Basic Usage:

1. Include h5-lightbox CSS on your page

<link rel="stylesheet" href="jquery.h5-lightbox.css">

2. Markup (Add a data-large-src attribut to the img element with the url of the larger version of your image.)

<img src="1.jpg" alt="DEMO!" width="200" height="300"
         data-large-src="large.jpg">

3. Inlcude jQuery Library and h5-lightbox.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="jquery.h5-lightbox.js"></script>

Change log:

v1.2.2 (2014-02-19)

  • The wrong ID was used for the lighbox image container, so the img src was never updated.

v1.1 (2013-09-26)

  • updated to the latest version

This awesome jQuery plugin is developed by morganestes. For more Advanced Usages, please check the demo page or visit the official website.