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

  • Fully responsive and supports desktop, iPhone, iPad, Andorid 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 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 7 skins to choose from: gallery, mediapage, darkness, light, vertical, showcase, 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 4.8

  • Fix a bug of playing YouTube on IOS devices
  • Add an option watermarklink

Version 4.7

  • Support placing carousel on top of images

Version 4.6:

  • Add a new skin mediapage

Version 4.5:

  • Fix a minor bug when playing YouTube channel

Version 4.4:

  • Fix a minor bug of playing YouTube video

Version 4.3:

  • Support YouTube channel, with format: data-youtubechannel='{ "author": "BlenderFoundation", "start-index": 1, "max-results": 5, "orderby": "published" }' or data-youtubechannel='{ "q": "Big Buck Bunny", "start-index": 1, "max-results": 5, "orderby": "published" }'
  • Add an option imagetoolboxmode for button display: show, mouseover, hide
  • Specify galleryid in configuration
  • Specify jsfolder in configuration
  • Fix a minor bug in horizontal skin
  • Fix the bug of lightbox when viewport width set to device-width
  • Fix the bug of timer position when screen size changed
  • Options to customize lightbox border, text height, margin and background color: lightboxborder, lightboxtextheight, lightboxmargin, lightboxbgcolor
  • Add an option updatecarouselinterval with default value 60000. That's, if the left and right buttons of the carousel are clicked, the carousel will not automatically switch in 60 seconds.
  • Fix a bug of showing poster image
  • Improve lightbox text display

Version 4.2:

  • Show thumbnail image same size as the thumbnail area when the thumbshowtitle is false for Vertical skin
  • Change option showsocialmedia to false for all skins

Version 4.1:

  • Change option autoplayvideo default value to false
  • Fix the bug of video continue downloading after it's switched off
  • Detect IE11 and add an option useflashonie11 which has a default value of false

Version 4.0:

  • Add an option useflashonie9 which has a default value of true. This option will force IE9 to use Flash player.
  • Change default value of option useflashonie10 to false. If this option is true, it will force IE10 to use Flash player.
  • Fix a bug of Android touch swipe.

Version 3.9:

  • Fix a bug of loop

Version 3.8:

  • Fix a minor bug in carousel

Version 3.7:

  • Add an option notupdatecarousel with default value false. When its true, the carousel will not switch to the current item.

Version 3.6:

  • Support displaying description in skin showcase

Version 3.5:

  • Add an option playvideoonclick to play video when clicking thumbnail. The default value is true.
  • Support an extra high quality video with data tag data-hd. To configure high quality videos as default, use data tag data-hddefault="true"
  • Support customized HTML5 video player controls. To switch to native controls, use data tag data-nativehtml5controls="true"
  • Add a new skin showcase.

Version 3.4:

  • Fix a bug with jQuery 1.10

Version 3.3:

  • Change default value of option html5player to true

Version 3.2:

  • Change the skin navigation buttons to make visible on white background
  • Change default value of resizemode to fit

Version 3.1:

Version 3.0:

  • Support mobile responsive design by using screen query

Version 2.9:

  • Fix the bug of detecting Opera 15

Version 2.8:

Version 2.7:

  • Fix minor bugs
  • Add tag data-poster for videos

Version 2.6:

  • Add a new skin: gallery

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