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

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.

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

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

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

<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>

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

• Add a new skin verticallight: Light Color Vertical Gallery

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

• Support opening lightbox popup when clicking on the image itself. For detailed help information, view https://html5box.com/html5gallery/install.php#lightbox

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

• Support creating YouTube playlist gallery with YouTube API v3.

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

• Support adding a loading animation to the gallery: How to add a loading animation to HTML5 Gallery.

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:

• HTML5 Gallery is now fully responsive
• Support fullscreen photo and video gallery
• Support touch swipe on mobile and tablets

Version 3.0:

• Support mobile responsive design by using screen query

Version 2.9:

• Fix the bug of detecting Opera 15

Version 2.8: