Friday baffler: the scriptless slide show

As you may know, I have this thing for slideshows and how to make them as unobtrusive as possible. Now, I just found some code by Adriaan Bouman in an exercise. It does the following:

- next
- previous
- next
- previous
- next
- previous
- next
- previous
- next
- previous

There is no JavaScript involved and yet it is a slide show that works the way you think it should. I liked the sneakiness of it, but do not necessarily agree with the markup. However, you can take this idea and scatter images over the document and position them absolutely to create the same effect.

[tags]css,trick,slideshow[/tags]

This entry was posted on Friday, September 21st, 2007 at 2:43 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

http://billy-girlardo.com/delicious/2007/09/21/links-for-2007-09-22/ All in a days work…

[...] onsumption on hardware from portable devices running on batteries to large data centers. the scriptless slide show I left a comment, we’ll see (or not) Rumor: Google Considering UK Wi [...]
http://www.reala.net/ Robin

Sneaky ;)

Eventually you’ll be able to do the same thing with the :target pseudoclass; not sure if that’s less hacky or not.
http://billy-girlardo.com BillyG

Nice find!

It is making my page jump after every selection (which should be fixable), but no JavaScript is a-okay in my book.

The only question now is whether or not it validates…
http://billy-girlardo.com BillyG

Nice find!

It is making my page jump after every selection (which should be fixable), but no JavaScript is a-okay in my book.

The only question now is whether or not it validates…
http://www.yalf.de Jens

Clever :-)

Works like a charm in Firefox and quite alright in IE6.
But I regret to observe that it does not work in Opera 9.23. Page just jumps, no change of image involved.
Alex Robinson

Doesn’t work properly in Safari 2.04 either.
FlorentG

I’ve done this a loooooooong ago, but as other already said, it doesn’t work on opera.
Adriaan Bouman

Did some tests and the problem in Opera 9.2 (not tested Safari) got something to do with the overflow:hidden. If you put overflow:auto you get scrollbars on Opera, but fixes the problem!

Now you can use overflow-x & overflow-y to hidden for the browsers that support this!

You could also use some php and GET vars to show and hide the images. But then you need a refresh each time.
Adriaan Bouman

Did some tests and discovered that Opera has a problem with the overflow:hidden. To solve it you could use overflow:auto. Now it works but displays scrollbars. You could use the overflow-x and overflow-y to hide the scrollbars for the browsers who support this. (didn’t test in Safari)

You could also use some PHP and some GET vars, but this would need a refresh for each image.

(posted second time, first time browser hung…)
http://www.stewartpratt.com/ Stewart Pratt

It’s completely broken in my Firefox (can’t see any navigation links – for some reason there’s a “»” character appearing above the first slide) and partially broken in IE (the font size I choose determines whether I can see none, one or both links, and sometimes part of the following image).

The principle seems viable, though – just needs to be implemented so that the height of each ‘slide’ is exactly known; which means either using images for buttons or placing the nav links to the side instead of below.
http://neilanderson.freehostia.com/ Neil Anderson

This would appear to be using CSS for behaviour is this a good idea? And if you, as you say, question the markup involved?