The HTML5 slideshow is a successor to the flash slideshow. The advantages of using HTML over flash are:

• slideshows can be viewed on devices which don't support flash (e.g. iPads)
• it's much easier to customise the design using CSS
• makes use of improving web technology and performance on modern browsers

Please note that the HTML5 Slideshow is only supported in the latest web browsers: IE9+, Firefox, Safari and Chrome

Customising the HTML5 Slideshow

The slideshow can be customised using the 2 config files found in: /images/slideshows/common/html5/dist/. These are config.css which allows you to customise presentation, and config.json which allows you to change layout and behaviour.

Layout customisations allow you to set which parts of the slideshow are visible (except for the stage). The image below shows the main sections of the slideshow. By setting these sections to "on" or "off" we can show or hide them. The visible elements will then adapt themselves to the new layout, for example, the stage will increase in size if the headerBar is turned off.

The following table shows the keys for the config.json file, the default values, possible values and a brief explanation of what each does.

Customising embedded slideshows

When you download a slideshow, you can customise its layout and behaviour independent of any other slideshow.

To customise colours edit the custom.css file. To customise layout and behaviour edit the embed snippet in the index.html file or the config.json file.

Note that settings in the config.json file are overwritten by equivalent settings in the index.html embed code.

Examples of customisations

This is an example slideshow embed code.

<div id="h5" style="width:640px; height:640px;">     <iframe src='h5.html?setup={"assets":"slideshow_d.json","config":"config.json","title":"test 003","displayTime":5,"onExternalSite":"on","type":"slideshow","rtlText":"off"}'             style="border:0; display: block; width:100%; height:100%;"             allowfullscreen frameborder="0">     </iframe> </div> 

Which produces the following slideshow.

Let's run thought a few customisations. Firstly we'll change the overall size to 300px by 400px.

<div id="h5" style="width:300px; height:400px;">... 

This produces a much more compact slideshow. We could also set the slideshow width and height as percentages which is useful for responsive layouts.

It would be nice to remove the black lines above and below the image. We can do this by adding "autoResize":"off" to the embed configuration.

<div id="h5" style="width:300px; height:400px;">...     <iframe src='h5.html?setup={"assets":"slideshow_d.json","config":"config.json","title":"test 003","displayTime":5,"autoResize":"off","onExternalSite":"on","type":"slideshow","rtlText":"off"}'             style="border:0; display: block; width:100%; height:100%;"             allowfullscreen frameborder="0">     </iframe> 

Now the image fills all of the available area. This does mean that parts of the image are obscured.

We can also remove the control bar to make more room for the images by adding "controlBar":"off".

<div id="h5" style="width:300px; height:400px;">...     <iframe src='h5.html?setup={"assets":"slideshow_d.json","config":"config.json","title":"test 003","displayTime":5,"autoResize":"off","controlBar":"off","onExternalSite":"on","type":"slideshow","rtlText":"off"}'             style="border:0; display: block; width:100%; height:100%;"             allowfullscreen frameborder="0">     </iframe> 

Finally, we can change the custom.css file to make colour changes. There are comments in the file to explain what can be changed, in the example below we've changed the background colour to grey and the borders around thumbnails.