Fullscreen Browser Slideshow with Clock

I have a penchant for making full screen slideshows with a clock on them

Screenshot-Slideshow

This time around I looked to make one up to run on a slghtly higher specced machine, running a GUI, but in a web browser, using php and javascript. The eventual target was an OS called Webconverger because of its ability to just fire up and present in this way.

I’ll start with Webconverger and how it needs to be customised.

Webconverger Customisations
The important entries to add to the API (boot command line) are:

unclutter is already running on Webconverger

getimages.php
This php file creates the randomised array of images for the web page to display. Was grateful for this from javascriptkit.com and some good help from Sergui on stackoverflow.com who advised on the shuffling for the array. The file has to be in the same directory as the images.

Can’t claim to fully understand how it works but it does.

slides.html

Now for the html page.

Some key things going on in here. First up the css to position everything correctly on the web page, and to make the images fill the window (regardless of aspect ratio!) – I will use images most likely to look good if stretched sideways. Then some more javascript to pull each image out of the array, and to rotate them at a set interval. This can be edited to suit. Next up is the holding image. You will see this each time the page is opened, so it could be a welcome page or one you like a lot. I guess you could randomise this too if you thought about it 😉 Finally the code for the clock, as created on timeanddate.com.

Grab some images

On your web server, create a folder called slide and inside this a folder called pics. Copy slides.html inot the slide directory, then copy getimages.php and all the images you want into the pics folder. You are done.

Now browse to your server address e.g. http://localhost/slide/slides.html and your slideshow should start up, with a clock.

Here is an example Sample Slideshow

Leave a Reply

Your email address will not be published. Required fields are marked *