This tutorial is only available for HTML5 Gallery Version 5.7 and above.

To add a loading animation to HTML5 gallery, you can add an extra div with class name html5gallery-loading before the html5gallery div, for example:

<!-- the html5gallery loading div -->

<div class="html5gallery-loading" style="display:block;margin:0 auto;width:300px;height:300px;background:url('html5gallery/loading.gif') no-repeat center center;"></div> 

<!-- your existing html5gallery div -->

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

After the gallery is loaded, it will automatically hide the loading div.

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>

Two new demos of fullscreen HTML5 galleries:

http://html5box.com/html5gallery/demo_fullscreen_fill.php

http://html5box.com/html5gallery/demo_fullscreen_fill_vertical.php

In your web browser, you can view the HTML source code of the demo page and check the data options.