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>

If your website already has a jQuery, do not add the jquery.js line, only add the html5gallery.js AFTER the existing jquery on your webstie:

<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 8 skins to choose from: gallery, mediapage, darkness, light, vertical, verticallight, 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="https://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 9.7

  • Fix the icon bug in version 9.6

Version 9.6

  • Fix a bug when the HTML page is dynamically loaded

Version 9.5

  • Add an option to force using touch screen mode for vertical skin galleries

Version 9.4

  • Vertical skin: change thumbnail carousel to mobile mode on touch screen monitors
  • Add an option to loop video

Version 9.3

  • Fix a minor issue when playing HTML5 video

Version 9.2

  • Add an option to not use the poster image in the video slideshow

Version 9.1

  • Add a data option mutevideo to mute videos on page load so they can autoplay on Safari and Chrome
  • For Vertical and Vertical Light skin, move the thumbnails to the bottom of the slideshow on small screen devices

Version 9.0

  • Fix the video aspect ratio bug of vertical skins

Version 8.9

  • Convert title code to pure text before adding it as alt and title attrubites of <img> elements

Version 8.8

  • Add alt attributes to all dynamically created <img> elements
  • Add an option firstitemid to specify the first item on page load

Version 8.7

  • Specify YouTube thumbnail and poster image name with data attributes

Version 8.6

  • Fix a responsive bug on mobile devices

Version 8.5

  • Fix a bug of thumbnails when resizing the web browser window

Version 8.4

  • Fix a bug of displaying iframe videos

Version 8.3

  • Add an data option to reload the current video or advance to the next video after the current vidoe ends

Version 8.2

  • Fix a bug when playing MP4 videos in fullscreen on some Android phones

Version 8.1

Version 8.0

  • Fix a problem under Internet Explorer

Version 7.9

  • Add a data option pauseonmouseover

Version 7.8

  • Fix a bug of title width in the skin Gallery

Version 7.7

  • Fix a bug of lightbox popup

Version 7.6

  • Add social media share buttons: Facebook, Twitter and Pinterest
  • Add an option addthumbnailtitle to add title to thumbnail images

Version 7.5

  • Fix the bug of scroll bar not working in Vertical skin

Version 7.4

  • Add API functions playVideo and pauseVideo

Version 7.3

Version 7.2

  • Fix a bug in Media Page skin

Version 7.1

  • Support adding class name html5galleryimg to img tags
  • Fix the bug of arrows not having the same distance to the border

Version 7.0

Version 6.9

  • Temporarily fix for YouTube channel because of the depreciation of YouTube Api v2. Support for YouTube api v3 will come soon.

Version 6.8

  • Support using data options lightboxwidth and lightboxheight to specify the popup lightbox size
<a data-lightboxwidth="640" data-lightboxheight="480" href="images/Green_1024.jpg"><img src="images/Green_256.jpg" alt="Green"></a>

Version 6.7

  • Fix minor bugs

Version 6.6

  • Add two new effects: fadeout and fadeinout

Version 6.5

  • Fix minor bugs

Version 6.4

  • Support displaying iframe

Version 6.2

  • Fix the bug of onthumbclick event

Version 6.1

  • Fix minor bugs

Version 6.0

  • Add a data tag to specify duration of each slide

Version 5.9

  • Scroll to page top for mediapage skin

Version 5.8

  • Fix a minor bug in thumbnail carousel responsive

Version 5.7

Version 5.6

  • Fix the non secure content warning on https website when playing YouTube

Version 5.5

  • Fix a minor bug of playing Vimeo

Version 5.4

  • Support Dailymotion
  • Play Vimeo continuously
  • Add a new skin: gallerywithtext

Version 5.3

  • Display description in Lightbox
  • Fix a bug of responsive YouTube video playing in mobile devices

Version 5.2

  • Fix a minor bug in skin mediapage

Version 5.1

  • Add an event onthumbclick

Version 5.0

  • Fix a bug of playing Vimeo on some Android devices

Version 4.9

  • Fix a bug playing video on some Android devices
  • Fix a minor bug on vertical skin

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