General programs

htmlslideshow

Web-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:

• htmlslideshow.html - copy, paste and change as appropriate into your own HTML files
• sampletour.dat - alter this to put in your own content
• tour.js - if you wanted to alter the size of the pop-up window you'd change it here
• tour.pl - alter the path to your Perl executable at the top. Alter styles, footer or any other details as appropriate. Be careful with the styles, especially with respect to sizing, ensure they work on both IE and other browsers like Firefox.
• Add graphics to each slide as appropriate, best not to set the size of graphics using the width command, simply supply your graphics in the size that they should be

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:

• Your Perl script will probably need to have the execute flag set on the file which lives on the server (chmod +x tour.pl, or use your favourite FTP program to set permissions, or talk to your ISP)
• You may need to modify the first line of tour.pl to point to the correct location of your Perl executable. If you don't know, ask your ISP.
• You may have edited the file on your Windows PC and then uploaded it. This may have changed the formatting in the file (with respect to line breaks). This may cause problems.
• Be very careful not to use characters that might upset Perl in your data file. Remember that the data file is actually still a Perl program. If you look carefully you'll see that all the text which goes into your slides is enclosed in single quote characters. This means that if you have a word like don't in your text, the single quote character will cause major problems, and all the text after that point will disappear. If you must use a single quote character within your text be sure to escape it with the backlash. Therefore the previous example becomes don\'t when you write it into your data file.
• Because this requires server-side Perl it won't work at all if you try to run it via a browser from your local PC
• Your ISP must allow you to run Perl scripts from your site, and they may not. Check with your ISP if in doubt

Feedback

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!