All posts by admin

Caption outside of the HTML5 Gallery

jQuery Photo Gallery, jQuery Video Gallery

Question:

I'm wanting to have the titles outside the videos/images - not over the top as they are by default. I was just trying to do this by CSS with a margin-top:-60px; but this makes the title disappear as it's then outside the .html5gallery div.

I've tried every combination of adding padding to the top of the gallery to make room for my negative margin, but no dice. Any ideas?

I don't have an example uploaded anywhere at the moment, just doing it on my localhost. Let me know if you need a demo and I will make one with all the extraneous stuff removed.

Answer:

You can view this tutorial:  http://html5box.com/html5gallery/cssstyle.php

The tutorial is placing the title to the bottom, you can change the top value to -60px !important to make it go to top.

And I think the problem is because the text colour is white, it becomes invisible if your webpage background is also white. So you probably also need to change the text colour.

<style type="text/css">
  .html5gallery-title-0 {
    top: -60px !important;
  }
  .html5gallery-title-text-0 {
    color: #333 !important;
    background-color: transparent !important;
    text-align: center !important;
    font-size: 18px !important;
  }
</style>

How to loop one video in HTML5 Gallery?

jQuery Video Gallery

Question:

I may be clutching at straws but thought I'd ask: would you know of a way that each video (mp4 and webm) can individually be configured / encoded / saved to automatically loop each time it plays -- independent of any html or xml code?

Answer:
This can not be done by encoding a video.
With HTML5 Gallery, you can do the following:

1. Add the following JavaScript code in your webpage head section, before the </head> tag:
<script type="text/javascript">// <![CDATA[
function onVideoEnd(data) {
var id = data[0];
html5GalleryObjects.objects[0].isPaused = true;
html5GalleryObjects.objects[0].slideRun(id, false, true);
}
// ]]></script>
2. In your gallery div, add the following data tag:
data-onvideoend="onVideoEnd"

The video will loop playing the current video once it starts playing. This only works on desktop, will not work on mobile.

What’s the difference between HTML5 Gallery and HTML5 Lightbox?

jQuery Gallery, jQuery LightBox

Question:

Can you please tell me the difference between gallery and html5 lightbox?

Answer:

They are similar products,  both support images and videos, but they can make different style galleries:

With HTML5 gallery, you can embed the gallery in your web page.
With HTML5 Lightbox, your can display an image/video/gallery in a lightbox popup.

Support FLV files in HTML5 Gallery

jQuery Video Gallery

Question:

Excellent image/video slider I found and download the free version of HTML 5 Gallery to try, I found that it's not working properly of FLV format in Google Chrome, but everything fine in IE and Firefox, is that my Google Chrome problem ?! and I have tried more than one PC, overall not working of Google Chrome, my Google Chrome version is 30.0.1599.66 and Window 7, really appreciated for your reply, TQ 🙂

Answer:

FLV is a Flash video format, and it's not HTML5 compatible. You can add the following data tag to the div to force using the Flash player:

data-html5player="false"

Dynamically edit HTML5 Gallery play list

jQuery Photo Gallery Tutorial

Question:

I was using your product today. I found it very interesting . However I have noticed the images and videos added  dynamically to the div tag hosting the plugin do not get rendered. The div tag shows blank.

Answer:

You can view this tutorial: http://html5box.com/html5gallery/initialize.php

The idea is, do not add the class name html5gallery to the div, use an id instead. Like following:

<div id="mygallery1" data-skin="gallery" data-width="480" data-height="270" style="display:none;"></div>

Then every time you dynamically update the playlist, you can call the JavaScript function to re-initialise the gallery and reload the images/videos list:

$("#mygallery1").html5gallery();

Add multiple mp4 files to one video gallery

jQuery Video Gallery

Question:

I have downloaded the HTML5Gallery free version and can try on the sample skins pages.

It is simple in coding.  However, when I add more different mp4 files on the gallery list, it's not working.

I wonder is it the free version allow 1 mp4 only?

I want to make sure that the gallery can handle multiple mp4 files on local drive before I can make purchase.

Answer:

The free version is full functional, and the only limit is the html5box.com watermark.

It supports multiple mp4 video files in one gallery.

You need to make sure your mp4 URL address in your HTML codes is correct and the mp4 file itself is HTML5 compatible.

If you directly open the mp4 file with Google Chrome and it can play, then it means it's HTML5 compatible with Chrome,  otherwise, you need to re-encode the video: http://html5box.com/html5gallery/install.php#videoformat