Journal
DOM Gallery
9 April 2006 › 16 comments
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 800×600. 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.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Bruno
Thank you for that gallery, very nice! I always admire your willingness to give quality code away. Success.
#2 polarizer
Really nice work.
I faced one little problem. Until pictures aren’t loaded completly, a click on a thumbnail opens up a new window (in my case a tab – opera 9.0).
Try it with a slow internet connection with a clean and empty browser cache.
polarizers 2 cent
#3 Nathan Smith
Polarizer: I get that same behavior in Firefox, of the images loading as they normally would. I think it’s because the JavaScript hasn’t run completely, replacing the default behavior. I’ll see what I can do to fix it.
#4 Jeff
Nice photo gallery.
I love the stand used for that antique trumpet … what is it?
#5 Elliot Swan
Pretty sweet, nice styling.
Out of curiosity, are these all photos you’ve taken? The “Old Barnyard” is a pretty nice shot.
#6 Nathan Smith
Jeff: The trumpet stand is a Konig and Meyer 5-Leg. It’s great, because the base detatches and fits within the bell-area, allowing the whole thing to fit easily in a standard trumpet case. When I used to play in a praise and worship band it was convenient, and sure beats setting it on the floor.
Elliot: These photos are a mix of ones that my wife and I have taken, with the exception of the ocean picture, taken by a friend of mine while he was commercial fishing in Alaska (used with permission). The old barnyard shot was taken in the small town of Wilmore, Kentucky which is where my wife and I were at for grad school – Asbury Theological Seminary.
#7 Abba Bryant
I think you could use
Onload altternative: @ http://dean.edwards.name/weblog/2005/09/busted/
Or
Htc Version: @
http://dean.edwards.name/weblog/2005/09/busted2/
To load the behavior layer to the dom before the images have downloaded. That should fix the lag on the link effect due to image download. Careful not to try and add any events to anything created programatically. Save the body onload event for that or use another method.
Thanks for the inspiration
#8 Nathan Smith
Abba: Thanks for those suggestions. I’m not a JavaScript guru by any means, and appreciate it when people help me improve upon things.
#9 Dustin Diaz
Hi Nathan, I was just wondering what the numbers were for. They’re not doing anything for me when I click on them.
OS: OSX: Browser: Safari 2.0.3
#10 Nathan Smith
Dustin: Those are just some “dead” links, to show people how they could take this interface and then put links to other galleries, within the same page structure (gallery 1, gallery 2, etc). They’re not actually meant to do anything in this example. Sorry, I guess I should have better explained that part.
#11 raz
Personal opinion here, but I think the stuff is missing a loading indicator… after clicking the thumbnail nothing happned for awhile with no indication of it is loading.
Traditionally one would assume its something he did wrong when it is actually loading the image.
#12 Nathan Smith
Raz: You’re right, the JavaScript could definitely be improved upon. You might want to try coupling my interface with Robert Nyman’s JavaScript Slides. If I get some spare time, I’ll probably be contributing a “skin” for his JS library.
#13 Wyclef
Could someone explain how to modify this DOM Gallery to accomodate a more detailed list? Say you wanted to include, Title, Date, Description, & some miscellaneous category. How would you accomplish this?
#14 Nathan Smith
Wyclef: This script works by simply swapping out the “src” location of the image, and replaces it with the image link that is clicked on. It is not designed for what you are asking about. For that, you would need an entirely different JavaScript file, and probably some heavily modified form of the template I’ve made. In short, that would be a do-it-yourself project.
#15 Rüdiger Pissnelke
Helo Nathan,
Thank you for the script. I have implemented it into my website for a personal gallery. Is there a quick way to allow for vertical pictures as well? If I use pictues with the correct heigt (375px) and less width the pictures are enlarged. Can I switfch that of?
#16 Nathan Smith
Rüdiger: This can be fixed by editing the #placeholder section of the CSS file. On lines 108 and 109, you will see width and height, which you can modify to be whatever you like. Or, if you leave them blank, the photos will default to whatever the real image size happens to be.