jQuery Image and Video Gallery Plugin - Awesome Image and Video Gallery, Supports Images, Flash, YouTube, Vimeo, MP4, M4V, OGG, OGV and WebM Videos, Works on Android, iPhone, iPad, Windows Phone and All Modern Web Browsers

A perfect combination of HTML5, CSS3, Flash and jQuery, easy to install and easy to configure
The first Gallery that supports images, YouTube, Vimeo, mp4, m4v, flv, ogg, ogv and webm videos in one gallery and works on mobile, tablets and all web browsers
The only Gallery that supports Google Analytics Logging, LightBox effect and social media integration

Features List

Photo and Video Support: Support images, videos, YouTube and Vimeo. You can create a photo gallery, a video gallery or a gallery of photo, YouTube, Vimeo, mp4, m4v, flv, ogg, ogv and webm local videos.

Work for Desktop and Mobile Web: A perfect combination of HTML5, Flash and jQuery. HTML5 Gallery works on Windows, Linux, Mac, Android, iPhone, iPad, Windows Phone and all modern web browsers.

Social Media Support: Built-in Facebook, Twitter and Google+ support

Google Analytics Event Tracking: You can set up a Google Analytics account to track how many times each image or video has been viewed or played.

Google Fonts: You can display the title with stylish and free Google fonts.

LightBox Effects: Support built-in LightBox effects for images, videos, YouTube and Vimeo

XML or Inline HTML Codes Playlist: You can provide playlist with regular inline HTML codes or an XML file.

Horizontal and Vertical Skins: Support horizontal and vertical thumbnail carousel skins, more skins will be provided in future versions.

Image Preloading: HTML5 Gallery can preload next image thus avoiding unnecessary waiting.

Easy to Install: By using the HTML5 data tag, HTML5 Gallery is the easiest gallery to integrate to your webpage

Multiple Galleries on One Page: You can create multiple photo or video galleries on one webpage without any extra settings.

Branding Your Gallery (Commercial Version Only): You can branding the gallery with your own logo.

Quick Installation Guide

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

2. Reference the file html5gallery.js which is in the folder html5gallery before the </head> of your web page

<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 5 skins to choose from: gallery, darkness, light, vertical, horizontal. To hide all images before the Gallery is loaded, set the div's style to style="display:none;"

<div class="html5gallery" data-skin="darkness" data-width="480" data-height="272" style="display:none;">
</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="darkness" data-width="480" data-height="272">
  
  <!-- Add images to Gallery -->
  <a href="images/Trees_large.jpg"><img src="images/Trees_small.jpg" alt="Trees"></a>
  <a href="images/Island_large.jpg"><img src="images/Island_small.jpg" alt="Island"></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. The Gallery is ready to go. For more options, view the online Help Document.

What's New

Version 2.5:

Fix the issue with jQuery 1.9.0

Version 2.4:

Fix the bug of assigning link and link target to slider
Change the way to get the folder of js file

Version 2.3:

Support customzed parameters in YouTube link
Fix the issue on IE7: hide preloading on IE7 and IE6
Option to display order of current slide in title

Connect With Us

Follow @html5box

Services

Skins

Products