I'm getting married! - More Details

Gallery Feature - Thumbnail Preview

Tuesday, March 21, 2006 1:04 PM

With the addition of more and more photos, I continue to add new features to the photo gallery itself. Today I published a change so that when you're viewing a photo, you can easily see the thumbnails of the other photos in that album. Just move your mouse over the different pages in the album, and you'll be presented with the thumbnail of that page.

The feature is original inspired by a similar functionality on Kodak Galleries , and stylistically by SlideShowPro.

 Here's a great album to try it out on: New Years Eve 2005

Comments

Zink 3/25/2006 6:13:31 PM
This is pretty sweet. At first I thought this was ajaxian, but it appears you're just creating some tags on the fly.

One thing I noticed, and I'm sure you've noticed this as well, is in your implementation--it seems like the image is showing up a little off center. Like the thumbnail for picture #5 is showing up and pointing to image #4 on the navigation menu. I can send a screenshot if you want to see what I mean.
Dusty 3/25/2006 9:13:45 PM
Yeah, at first I was thinking that it would *need* to be ajaxian, but then realized that the roundtrip to the server was completely unnecessary. Since the images have the same file names as the .aspx files, on the client side I was already was privy to all of the information that I needed. Just create the tags and roll on.

One thing to add though, there is a bit of a lag sometimes and it doesn't render completely until it loads the image, depending on the browser. I should probabably implement some sort of "loading" placeholder image, similar to what htey did over at Riya (http://www.riya.com)

As for the positioning, this is definately something that bothers me, but I hacked it together just to get it up. Basically for each browser it's a hardcoded offset. A little cheesy yes, but it works OK. A better solution would of course to find the offset of the link, and the width, and add half of the width to the offset, etc etc. You get the picture. All for another day however...
Zink 3/26/2006 1:25:29 AM
Positioning is something I hassled with for some time when I worked on that hoverbox project...

I ended up using a function of the DHTML and javascript cookbook by O'reilly.

Here's the exact code snippet:

http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap13/index6.html

You can call the function like this...

var offsets = getElementPosition("controlid");

Then access the returned object's values...
offsets.top; <-- pixels from top of page
offsets.left; <-- pixels from left of page

Anyway, that worked perfectly in both IE and FF, I believe.
Zink 3/26/2006 1:29:04 AM
The timestamps on my comments are 1 hour behind.
I'm posting this and it's currently 2:28am.

Better fix that! >=0
Dusty 3/26/2006 1:32:48 AM
Haha.. it looks like it's 2:32 am right now. Stupid GoDaddy appears to be 1 hour behind. I'll see what I can do...
Dusty 3/30/2006 12:27:51 PM
That getElementPosition() function is great! I just used it here at work today, I'm definately changing my code for this thumbnail preview to use that. Thanks Zink!


Post a comment

   
 
  
  

    

All content © Dusty Davidson