slayeroffice - web experiments gone horribly awry

08.25.2004 - Slide Show III

This idea occured to me while I was at Mark Pilgrim's site reading his hilarious (and sadly, true) "Why Specs Matter" article.

Mr. Pilgrim's header on his site is a single image broken out into thirty-six <div> elements with the background-position staggered to create a mosaic effect. I thought a slideshow that would render the images in this manner might prove interesting.

As many <img> elements as you like are placed in a container element with all of their display's set to "none". When the script initializes, it loops over the images in the container and creates references to them, and then creates fifteen <div> elements, setting the SRC attribute of the first image as the background-image of each <div>. The background-position is then staggered accordingly and the fifteen <div> elements appear to be a whole image.

When you click on a navigation item (created dynamically based on the number of images found) the individual <div> elements contract until they are two pixels wide. The requested image is then broken up and the <div> elements expand until they are 100 pixels wide and the image once again appears whole. The background-position of each <div> is adjusted during the animation to make it appear as though the image is collapsing on itself. Sort of like the intro for The Love Boat, as Kevin aptly pointed out when I showed it to him.

Works in MSIE6, Mozilla, Firefox, Opera 7.5 (really, really well - very fast and smooth) and sort of works in Safari. The markup is completely semantic and valid and all behavior is applied via script.

Slide Show III

Its great, but #mContainer img {display:none;} should be sended by js too, because when it is semantic and so on, it should be visible when even if javascript is switched of . For this purpose I usualy use modified versin of script from here too be able to load javascript-enabled.css
Posted by Fred on August 28, 2004 @ 10:07 pm
Sorry for mistakes in english
Posted by Fred on August 28, 2004 @ 10:08 pm
Haha, reminds me of flash. :P

Nice going.
Posted by [m] on August 29, 2004 @ 1:00 am

can some one combine slide show 1 + progressbar scripts for

low bandwidth servers


email me 2 ---->
Posted by Guy on September 1, 2004 @ 8:19 am

I like :)
Posted by Myself on September 8, 2004 @ 5:01 pm
You'll be getting some memory leakage in Internet Explorer by keeping references to DOM objects. Other than that, nice idea :-)
Posted by Mark Wubben on October 1, 2004 @ 12:42 pm
Something that sprung to mind immediately on seeing the JS is to NOT use window.onload=summat;

You should use attachEvent / addEventListener to avoid trampling on any other load events.

Aside from that, v. nice :)
Posted by Phil on October 14, 2004 @ 10:07 am

Comments have been closed for this post.