jQuery Image and Video LightBox Plugin- Awesome HTML5 and jQuery lightbox effect, supports images, Flash SWF files, YouTube, Vimeo and local mp4, m4v, flv, ogg, ogv and webm videos, works on Windows, Linux, Mac, iPhone, iPad, Android, Windows Phone and all modern web browsers

Examples

Gallery of images, YouTube, Vimeo and local MP4 Videos with thumbnail navigation

Image

YouTube Video

Vimeo Video

Local mp4 Video

Local FLV Video (Legacy Use - FLV format is not compatible with iPhone and iPad)

Webpage

Webpage: a photo and video gallery in Lightbox.

Flash SWF File

JavaScript API

Image

Local Video

YouTube Video

Quick Installation

1. Download Free Version HTML5 LightBox, Unzip the downloaded file, copy or upload the folder html5lightbox to your web server

2. Reference the filejquery.js and html5lightbox.js which is in the folder html5lightbox before the </head> of your web page. If you already have a jQuery script in your web page, you need to add html5lightbox.js after your jQuery file. The minimum required version of jQuery is 1.6.

<script type="text/javascript" src="html5lightbox/jquery.js"></script>
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>

3. Add a class="html5lightbox" attribute to any link tag to activate the Lightbox effect

<a href="images/Toronto_1024.jpg" class="html5lightbox" title="Toronto">Image</a>
<a href="images/Big_Buck_Bunny_1.m4v" class="html5lightbox" data-width="480" data-height="320" title="Big Buck Bunny">Video</a>

To show a caption, you can use the title attribute, to define the size of a video or Flash SWF file, you can use the data-width and data-height attributes.

If you have a group of images and videos, you can use the attribute data-group to create a gallery. You can use data-thumbnail to add thumbnail navigation to the gallery.

<a href="images/Toronto_1024.jpg" class="html5lightbox" data-group="mygroup" data-thumbnail="images/Toronto_96.jpg" title="Toronto">Image1</a>
<a href="images/Sunrise_1024.jpg" class="html5lightbox" data-group="mygroup" data-thumbnail="images/Sunrise_96.jpg" title="Sunrise">Image2</a>
<a href="images/Big_Buck_Bunny_1.m4v" class="html5lightbox" data-group="mygroup"  data-thumbnail="images/Big_Buck_Bunny_1_96.jpg.jpg" data-width="480" data-height="320" title="Big Buck Bunny">Video</a>

Easy Branding

It's easy to add an image branding to HTML5 LightBox, all you need to do is adding the following scripts to the <head> section of your webpage.

<script type="text/javascript">
var html5lightbox_options = { watermark: "http://html5box.com/images/html5boxlogo.png", watermarklink: "http://html5box.com"
};
</script>

If you don't like the link on the watermark image, you can change the code to following:

<script type="text/javascript">
var html5lightbox_options = { watermark: "http://html5box.com/images/html5boxlogo.png", watermarklink: ""
};
</script>

What's New

Version 3.6

  • Display description under title
  • Use custom HTML5 video player controls that look same across all web browsers

Version 3.5

  • Support thumbnail navigation
  • Fully responsive
  • Fix a minor bug of playing video on Android devices

Version 3.1:

  • Support YouTube URL parameters, for example, you can use the following URL to play HD 1080p video: http://www.youtube.com/embed/YE7VzlLtp-4?rel=0&vq=hd1080

Version 3.0:

  • Add an option barheight to specify the height of the text area

Version 2.9:

  • Hide the loading button after a webpage is loaded

Version 2.8:

  • Fix a bug with jQuery 1.10

Version 2.7:

  • Change default value of option html5player to true

Version 2.6:

  • Fix the bug of detecting Opera 15

Version 2.5:

  • Fix the bug of duplicated HTML5 lightbox links

Version 2.4:

  • Support touch swipe
  • Improve display of previous and next buttons

Version 2.3:

  • Support HTML tag area

Version 2.2:

  • Press ESC key to exit Lightbox

Version 2.1:

  • Fix the issue with jQuery 1.9.0

Version 2.0:

  • Fix the bug of playing FLV video
  • Change the way to get the folder of js file