fyvie.net home
home | photos | diving | resources | projects | E+ | info | search

General programs


htmlslideshow screenshotWeb-based pop-up slides

While I was developing the ExhibitPlus documentation I wanted to have some sort of slide show where people could see some sort of tour of the features of the program, simply by clicking through a series of slides.

The requirement

I wanted something that was easy to maintain, and it should automatically calculate where the "next" and "previous" buttons would lead, as well as update the slide position (e.g. slide 3 of 7) automatically. I figured that I would be adding, removing and shuffling slides around so manually coding the html for these slides was a really bad idea. Having something running server-side also seemed like a nice idea.

An example

What better way is there to demonstrate what I am talking about than to invite you to look at the final product in action? Simply go over to the "take tour" section in the E+ documentation and take a look at the tours you will find there.

How does it work?

It's very simple. There is a small Perl program that I wrote called tour.pl sitting on the server. I simply call this program with some parameters, namely the name of the data file it will use, and the slide position to start at. The program then looks into the data file where it finds all the HTML it needs to generate each slide. It automatically appends all the navigation buttons and slide information. That's pretty much all there is to it.

But there must be some more work to do?

Ok, there was a little bit more work, but that wasn't complicated either. Since we want the tour to open in new window, and we want this window to be sized exactly the way we want it to, we need a little bit of javascript to do this for us. I "borrowed" this javascript from a commercial web site where I saw a similar tour. Unfortunately I couldn't get their server-side code which ran their tour, which is why I had to write my own, but I did save myself some work with their little javascript routine... To see the javascript routine download the file tour.js directly.

Now all we had to think about is that the HTML/CSS code contained in the data files was valid, pointed to valid styles, and that all the graphic files referenced by tour.pl were in the right place.

How can I make use of this?

In order to make life a little easier for you I've made a slightly modified version of the file, and packaged everything into an example file. You can then take that example, put it on your web server, and customise it to your needs.

You can download a .zip file containing a complete set of files to run this on your own server, or you can also view a live demonstration of this example.

I've downloaded it, but where should I start to customise it?

You should edit the following files:

Just experiment and see how it looks after you make changes. If you break something, go back to a backup and make your changes again one by one. Try to alter the sample first, and then integrate into your site, rather than starting immediately to integrate it into your site.

Other traps to watch out for

This script is very to use, however you should be aware of a couple of small points:


I just wrote this for myself, I didn't expect that anyone else would have a use for it. If you found it useful drop me a line and let me know!

valid XHTML 1.0! valid CSS!