A simple slideshow app in HTML5

If you want a simple, easy, flexibly sized slideshow presentation, you can use our browser based solution.

There are lots of ways to get a slideshow running

Photo frames are great at what they do. But it means you need to buy the device. And keep it working.

The default slideshow programs on your laptop don't always give you the flexibility you want - sometimes full screen is okay but not always.

There are lots of different slideshow packages for you to buy too.

Our approach is to just use a browser

It is easy to set up, and you can size the browser how you like.

The basic requirements for our solution are:


It will combine HTML, CSS and Javascript elements. Follow the steps below to create your very own slideshow app!

Step 1 : create a folder structure for the slideshow

Lets keep it all organised:

First we need a folder for the project, lets call it "slideshow".

Next, create a subfolder called "images" which is where all of the images we want to display will be kept.

Then create a subfolder called "javascript" for the supporting scripts.

We will inline the styling definitions (CSS) simply because there is so little of it. You can place it externally if you wish of course.

Step 2 : put the images you want to display into the "images" directory

Our solution will display as many images as you want.

In this tutorial, we will say we have 3 images, called "image1.jpg", "image2.jpg" and "image3.jpg".

Step 3 : download the javascript components into the "javascript" directory

We will make use of the jQuery Cycle Plugin which will do the hard work for us.

Naturally this has a dependency on jQuery.

Go ahead and download the latest of both of these and place in the "javascript" directory.

Step 4 : containing the images

Before we start building the web page, lets think about how we want to display the images.

We don't know (and don't want to know) how big each image is, or even if they are all the same size.

We also want to mix landscape and portrait images at will.

So we will put each image into a container. That container will:

Step 5 : create the index.html file

Create a new text file in the "slideshow" folder called "index.html"

Open that file up in your favourite text editor. The rest of the steps involve adding content into that file.

Step 6: add the basic structure of the HTML

Use the code below to start you off.

You will need to replace the actual version filenames for the javascript components you have downloaded.

And of course you can use the real image filenames you want to display.

Copy and paste a container element then update it with the image you want to display.

Assign the class of "portrait" to the image if you want it to fill the height.

Assign the class of "landscape" to the image if you want it to fill the width.

<!DOCTYPE html>
<html>
<head>
  <title>Slideshow example</title>
  <style>
  </style>
  <script src="javascript/jquery-3.1.0.min.js"></script>
  <script src="javascript/jquery.cycle.all.js"></script>
</head>
<body>

  <div id="images">
    <div class="imgContainer">
      <img class="portrait" alt="image1" src="images/image1.jpg" />
    </div>
    <div class="imgContainer">
      <img class="landscape" alt="image2" src="images/image2.jpg" />
    </div>
    <div class="imgContainer">
      <img class="portrait" alt="image3" src="images/image3.jpg" />
    </div>
  </div>

</body>
</html>

Step 7 : add reset styling

We might need to get rid of some user-agent styling that will upset our display.

Giving everything a consistent background colour helps when the window gets resized too.

* {
  margin: 0;
  padding: 0;
  background-color: #000000;
}

Step 8 : style the container element

Below are the styling rules for the container, which:

.imgContainer {
  height:100vh; width: 100vw;
  position: relative;
  overflow: hidden;
  display: none;
}

Step 9 : style the portrait images

Next are the styling rules for portrait images, which:

img.portrait {
  display: block;
  height: 100vh; width: auto;
  margin-left: auto; margin-right: auto;
}

Step 10 : style the landscape images

Lastly are the styling rules for landscape images, which:

img.landscape {
  display: block;
  height: auto; width:100vw;
  position: absolute; top: 50%; transform: translateY(-50%);
}

Step 11 : configure and execute the cycle plugin

The plugin will deal with displaying the images in turn, according to the styling we have put in place.

There are many options and features to the plugin, but for our purposes we simply want to:

The plugin operates on each child of the specified element, which is why we need the

  <div id="images">
  </div>

block surrounding each of the "imgContainer" elements.

Here is the code to launch our screenshow:

<script>
$('#images').cycle({fx:'fade', timeout:8000});
</script>

Step 12 : dealing with a resize

The cycle plugin calculates sizes when it starts and by default doesn't recalculate.

Here we take a very simple strategy of reloading the page when the window is resized.

Simply add the code below into the script block we just added for the plugin:

$(window).on('resize', function(){
  location.reload();
});

Finished! Save your index.html file

You should now be able to double-click your index.html file to launch your screenshow.

Any problems? Here is the full code listing to check against:

<!DOCTYPE html>
<html>
<head>
  <title>Slideshow example</title>
  <style>
    .imgContainer {
      height:100vh; width: 100vw;
      background-color: #000000;
      position: relative;
      overflow: hidden;
      display: none;
    }
    img.portrait {
      display: block;
      height: 100vh; width: auto;
      margin-left: auto; margin-right: auto;
    }
    img.landscape {
      display: block;
      height: auto; width:100vw;
      position: absolute; top: 50%; transform: translateY(-50%);
    }
  </style>
  <script src="javascript/jquery-3.1.0.min.js"></script>
  <script src="javascript/jquery.cycle.all.js"></script>
</head>
<body>

  <div id="images">
    <div class="imgContainer">
      <img class="portrait" alt="image1" src="images/image1.jpg" />
    </div>
    <div class="imgContainer">
      <img class="landscape" alt="image2" src="images/image2.jpg" />
    </div>
    <div class="imgContainer">
      <img class="portrait" alt="image3" src="images/image3.jpg" />
    </div>
  </div>

  <script>
  $(window).on('resize', function(){
    location.reload();
  });
  $('#images').cycle({fx:'fade', timeout:8000});
  </script>

</body>
</html>

Validated with the W3C Validator

A final improvement

The problem with using a browser for this is that the address bar takes up screen space, making it look less like an app.

You can use the fullscreen mode, but since we want this to work in any window size, full screen isn't the answer.

Fortunately (at least in the Chrome browser) we can launch it in "app" mode, which opens up without the top bar.

For example, on Windows, we can create a .bat file to launch our slideshow:

cd /D c:
cd "\Program Files\Google\Chrome\Application"
start chrome.exe --app=file:///C:/slideshow/index.html
exit

Now you can size and position the slideshow to your liking.

Whats more, fullscreen mode can still be activated, if that is what you want.