JavaScript slideshow fun

February 22, 2006 at 12:48 am | Posted in javascript, tech | 26 Comments

There are things that go smoothly, run like a dream and never complain; there are others that don’t. For me, debugging JavaScript is always one the latter.

I have only recently begun to appreciate the power and fun to be had hacking at javascript, I used to panic at the thought of it. This was until I joined Torchbox where I received not only the help and confidence boost I needed, but also the office has a copy of Stuart’s book ‘DHTML Utopia‘.

I have only gone through the first three or so chapters in detail but over the past six months I have learnt to love event listeners and writing JavaScript as a seamless behaviour layer. No more do I panic about getting tangled up in ‘onclick‘s and ‘JavaScript:‘ – things become easier and a lot more fun when you can abstract the JavaScript from the page entirely.

I have written one or two snippets that I am quite pleased with, and although I have learnt to love writing JavaScript, I still hate debugging it. My most recent exploit has been into the realm of an accessible slideshow.

For work we wanted a way of showing images as a funky slideshow, the slideshow however needed to change the URL for each image and have the ability for the user to either manually alter the URL to go to an image, use the browser’s back button and bookmark an image. The user should choose when to move to another image so in the previously mentioned situations and when next or previous is clicked the images should fade into the next.

In true 2.0 style I have a ‘beta‘ version up and running, its not yet there but its a start. The next and previous links work and fade nicely, the back button really does work (even with the fade) as does the ability to change the URL manually. All images used are ones I have taken and are licensed under the creative commons.

The final version will:

• Fix all the bugs – so the style ‘issues’, (mainly in IE) there is a flash of the previous image in Safari and some nightmarish debugging is needed for the ‘Permission denied’ error I am getting in IE6! (You may have already guessed that I unashamedly developed this in FireFox.)
• Fix the performance problem – I really don’t know why this occurs but if you click through a number of images by the time you get to 6 or 7 the performance lag is very noticeable. Currently, I am changing the URL with fragment ID’s from the location.hash property and updating the location.href with the id of the current image. Listening to the URL is done through a function on setInterval() on 500ms that checks against one of the few global variables if the location.hash has changed. I’m thinking of changing this to use setTimeout() instead so I can stop it during the fade and start up again straight after, this might work.
• Have ‘further information’ links – per image that then changes (not necessarily fades) as the images do
• Use image maps – As this was the original intention of the slideshow, to work with images that are image maps, I am really hoping that this is going to be a nice easy stage; I have yet to try setting the opacity on image maps.
• Stress test it! – The fun part, its the fixing afterward that might not be quite such a laugh.

Some inspiration for the slideshow came from Matthew Westcott who developed the cool main image fade on http://breakthrough.org.uk/ and from the Image Cross Fader Redux.

Feel free to view my efforts:

• Demo
• CSS
• JavaScript
• CSS over-ride called by the JavaScript