JavaScript slideshow fun « Natalie Downe

Blog
About

JavaScript slideshow fun

February 22, 2006 at 12:48 am | In javascript, tech | 23 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.

DHTML Utopia 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:

23 Comments »

RSS feed for comments on this post. TrackBack URI

Also consider putting a prev/next link set at the top, where it’s fixed location will make it easier to repeatedly click the same link without re-mousing.

… And the long load time before reorging the page into the slideshow onload may be confusing. I can imagine people thinking its a regular list of photos, scrolling down (as it continues to load) and then being surprised when the page pops down to the first image.

Two ways I can think of to address that:

1) Don’t wait for onload to start scripting: you could immediately start watching for img elms (even as the doc is being loaded) and hide them as they are parsed into the DOM.

2) From script, immediately style all images to be hidden, then onload fix up your viewer and un-hide them.

… I think the 2nd way is better. In the 1st way, you’re likely to be fighting rendering reflows with the first approach.

(Sorry for the criticism– I do like the general result. :))

Comment by Jeremy Dunck — February 22, 2006 #
Thanks Jeremy that’s really useful. The second method, like you said, does sound a cleaner way of approaching the solution – Ill have a go at that :)

Comment by natbat — February 22, 2006 #
Nice. I like that. As an alternative to Jeremy’s suggestions, you might want to hook DOMContentLoaded (in Firefox) and use Dean’s defer trick (http://dean.edwards.name/weblog/2005/09/busted/) in IE so you don’t hang while the images are loading.

And thanks for the book pimpage, although you of course know that the technical editor did all the *hard* work. :-)

Comment by sil — February 23, 2006 #
[...] As pointed out by Jeremy, my linkable slideshow needed some work to fix the load order of the page without altering the ‘unobtrusiveness’ of its behaviour. [...]

Pingback by Natalie Downe » Fixing a few JavaScript slideshow loose ends — February 23, 2006 #
Hey Stuart– what’s with the frog cover? The one’s I’ve bought (2) both have the hang glider…

Comment by Jeremy Dunck — February 23, 2006 #
I did look at using DOMContentLoaded and Dean’s defer trick but the solution I came up with worked so the slideshow no-longer hangs while the images load, I will probably go back and use that trick anyway though, I just wanted to see if the try / catch on the DOM loading worked as a quick fix for the time being. Thanks for the suggestion … and the book! and I much prefer the frog cover :)

Comment by natbat — February 23, 2006 #
Frog cover…your guess is as good as mine. The covers happen somewhere I don’t know about. :)

Comment by sil — February 24, 2006 #
Nat, just jumped here from Simon’s site ;) – if you’re looking to get fancy with listeners, definitely check out the Y! util.Event stuff.

Stuart, the hang Glider was much cooler. at least you don’t have a funny pop-up-clown-box like Cameron’s book. Some of these covers just trip me out – you really have to question what they were thinking.

Comment by Dustin Diaz — March 20, 2006 #
[...] Cosillas de JavaScript, DHTML, DOMScripting o c�mo se le quiera llamar… Un fundido de im�genes, otro y un tercero. DOMTab son unas pesta�as bastante apa�adas, justo igual que JavaScript Tabifier. [...]

Pingback by otro blog m�s » Unos cuantos de desarrollo web (LXXXIV) — April 9, 2006 #
wedding cake flowers

Trackback by wedding cake flowers — July 18, 2006 #
brunette teens

Idinax33000i

Trackback by brunette teens — August 27, 2006 #
interracial porno

cr00topcheg

Trackback by interracial porno — August 27, 2006 #
first masturbation

Idinax33000i

Trackback by first masturbation — August 27, 2006 #
nude woman

cr00topcheg

Trackback by nude woman — August 27, 2006 #
naked and mature women

cr00topcheg

Trackback by naked and mature women — August 27, 2006 #
lesbian bdsm bdsm comics

zd00linkar

Trackback by lesbian bdsm bdsm comics — September 13, 2006 #
cock sucking monsters of cock

privegfd000g

Trackback by cock sucking monsters of cock — September 24, 2006 #
asian teens asian schoolgirl porn

polezsukablya000

Trackback by asian teens asian schoolgirl porn — September 24, 2006 #
fat guy sex

n00stalgie

Trackback by fat guy sex — October 24, 2006 #
http://www.google.com

Comment by Eddi — November 8, 2006 #
http://www.google.com

Comment by Eddi — November 8, 2006 #
history of airsoft

Blog Records:the medicine neurotinComments…

Trackback by history of airsoft — December 1, 2006 #
Here, Check This Out, Pretty GoodHave you seen my site? AMAZING,

Comment by ZcyQK — June 22, 2008 #