HTML5 Gallery Example

HTML5 Gallery Version 4.4

HTML5 Gallery is a jQuery image and video gallery plugin, it's an all-in-one solution for online photo and video gallery. It supports images, YouTube, Vimeo and local mp4, m4v, flv, ogg, ogv and webm videos, provides built-in LightBox effects and social media plugins, supports Google Analytics event tracking, works on Windows, Linux, Mac, Android, iPhone, iPad and all modern web browsers.

http://www.html5box.com, HTML5Box, a service of Magic Hills Pty Ltd

Skin Examples

7. HTML5 Video Player

Quick Installation Guide

1. Unzip the downloaded file, copy or upload the folder html5gallery to your web server

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

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

3. Add a div with class html5gallery to your web page where you want to display the Gallery. Define the size of the Gallery with HTML5 tag data-width and data-height. Specify the Skin with tag data-skin. There are 6 skins to choose from: gallery, darkness, light, showcase, vertical and horizontal. To hide all images before the Gallery is loaded, set the div's style to style="display:none;"

    <div style="display:none;" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272">
    </div>

4. Add images and videos to this div to make a Gallery. The thumbnail is specified in the img tag, the full size image is defined in href attribute of the surrounded a tag. The title is defined in alt attribute of img tag.

    <div style="display:none;" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272">
	    
       <!-- Add images to Gallery -->
       <a href="images/Tulip_large.jpg"><img src="images/Tulip_small.jpg" alt="Tulips"></a>
       <a href="images/Swan_large.jpg"><img src="images/Swan_small.jpg" alt="Swan on Lake"></a>
       
       <!-- Add videos to Gallery -->
       <a href="images/Big_Buck_Bunny.mp4"><img src="images/Big_Buck_Bunny.jpg" alt="Big Buck Bunny, Copyright Blender Foundation"></a>
       
       <!-- Add Youtube video to Gallery -->
       <a href="http://www.youtube.com/embed/YE7VzlLtp-4"><img src="http://img.youtube.com/vi/YE7VzlLtp-4/2.jpg" alt="Youtube Video"></a>
       
       <!-- Add Vimeo video to Gallery -->
       <a href="http://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;portrait=0"><img src="images/Big_Buck_Bunny.jpg" alt="Vimeo Video"></a>
    
    </div>

5. For more options, view http://html5box.com/html5gallery/install.php

Upgrade to Commercial License

1. Make payment at http://html5box.com/order.php. Once your payment is completed, your account information will be sent to your email address in minutes.

2. Download Commercial Version at http://html5box.com/members/.

3. To upgrade an existing Gallery, overwrite the html5gallery.js with the Commercial Version.

What's New

Online Version History

End User License

End User License Agreement

Video and Photos License Information

Colorful Tulips And Blue Sky Photo

HTML: Colorful Tulips And Blue Sky by Petr Kratochvil

Red Tulip Row Photo

HTML: Red Tulip Row by Petr Kratochvil

Swan On Lake Photo

HTML: Swan On Lake by Vera Kratochvil

Sakura Trees Photo

HTML: Sakura Trees by Petr Kratochvil

Tulip Background Photo

HTML: Tulip Background by Petr Kratochvil