DOM gallery
DOM gallery: view demo | download
In light of the recent announcement over Microsoft changing the way Flash works in Internet Explorer, I have been tinkering with a few ways to do my portfolio with JavaScript instead. I am not entirely certain I will use this, as I may just tough it out and see what becomes of using Flash via the object method. However, I thought it might prove useful to someone else.
I wasn't really sure what to call this, since it's just a simple JavaScript image gallery and doesn't really need a super snazzy name. So, I decided to just call this post DOM Gallery, because the script is pretty much a page right out of Jeremy Keith's book DOM Scripting. All I really did was design a skin around it, allowing for more images to be added within the same interface.
The way he has written the JavaScript is pretty ingenious, allowing for the title attribute of a link to replace anything with a certain id. At first I wondered why he didn't use the image's alt text, but then it dawned on me that by using title, it could be reused with text links too. Pretty smart.
If you're an accessibility purist, let me go ahead and say that I realize there are no scrollbars on the body, but I have tried to make sure that the entire area will be viewable in 800x600. That is, assuming you don't have a ridiculous amount of extra toolbars installed. I have used a method for horizontal and vertical centering, popularized by Ryan Brill, except I have used pixels instead of ems, because these are pixel-sized images, and wouldn't really benefit from a change in sizing.
I think that about covers it. The rest should be pretty easy to dissect. The XHTML and CSS are pretty simple, and the JavaScript is lightweight and readable. For a better explanation of what's happening there, I suggest you grab a copy of Jeremy's book, now available in a PDF eBook version.