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 display 1 image at a time
- The image will fill the available space
- It copes with landscape and portrait images
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:
- Fill the available display space (browser window size)
- Center a portrait image horizontally, and show it full height
- Center a landscape image vertically, and show it full width
- Prevent any overflow - we don't want scroll bars to appear
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:
- Make the container fill the available screen space
- It will have a black background (from step 7) should the image not fill it in either horizontally or vertically.
- Relative positioning allows the image to be sized within the container.
- We might get overflow, depending upon the relative aspect ratios of an image and the container, so we hide that.
- Lastly, don't show it! The cycle plugin will take care of that part.
.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:
- Make it a block element so it can have width and height
- Fill the height but maintain the aspect ratio on the width
- Center it horizontally
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:
- Make it a block element so it can have width and height
- Fill the width but maintain the aspect ratio on the height
- Center it vertically
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:
- Use a "fade" transition between images
- Display each image for 8 seconds (change this to suit your needs)
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.