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

Download Free

Free and Open Source, GPL2 Licensed

Examples

Image

YouTube Video

Vimeo Video

Local mp4 Video

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

Group of images, YouTube, Vimeo and local MP4 Videos

Webpage

http://www.magichtml.com

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 file html5lightbox.js which is in the folder html5lightbox before the </head> of your web page

<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, videos or Flash SWF files, you can use the attribute data-group.

<a href="images/Toronto_1024.jpg" class="html5lightbox" data-group="mygroup" title="Toronto">Image1</a>
<a href="images/Sunrise_1024.jpg" class="html5lightbox" data-group="mygroup" title="Sunrise">Image2</a>
<a href="images/Big_Buck_Bunny_1.m4v" class="html5lightbox" data-group="mygroup"  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 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

Connect With Us

Follow @html5box

Services

Products