Journal

Flickr + Hoverbox

7 April 2006 › 13 comments

For awhile now, I have been struggling to get my Flickr photos working with my own Hoverbox CSS image roll-over technique (go ahead – make fun of me). The problem I was running into is this: Flickr photos are written dynamically to the DOM by JavaScript. As such, there is pre-determined code that is defined, which is un-touchable. So, basically all I can do is throw a div around it, and hope to style things using descendant selectors.

After a bit of tinkering, I have come up with a solution that works across most browsers (Firefox / Safari / Opera), but degrades nicely in IE6. If you’d like, check it out on my index page. Without going into too much detail, since that has already been talked to death in the previous Hoverbox article, I’ll compare the normal method with the way the Flickr example works.

Normal: There is a series of elements, the important ones being the li, a, and img tags. By making the li lock into place with position: relative, we are then free to move things around inside. The contained image gets position: absolute, and then we subtract half the width of the preview image from the top and left, pulling the larger image to overlap and pop-out.

Flickr: Using the Flickr API, we embed that bit of JavaScript into a page, and it sends along some very basic HTML code, consisting of something like this:

<a href="..."><img src="..." alt="blah" /></a>

So, that’s not good, because we’re missing the power gained by floating list items, thereby limiting the amount of cool stuff we can do. But, fear not good citizens, because this actually can still be accomplished, by essentially turning the anchor links into block level elements, and then positioning them accordingly. In other words, who needs lists?

Before the CSS example, there’s one slight caveat – by using display: block, we automatically double the margins in IE (because of a bug). When floating things, this is normally remedied by display: inline, which of course we can no longer use, because we need to style the blocky a with exact dimentions.

That being said, things should make sense in this case, assuming you’ve read / implimented the previous Hoverbox tutorial. Oh, and I should mention that the 9px Tahoma is simply to give some styling to the alt text as the images load, and is completely unrelated to the functionality of this code. Then again, neither is the margin on the containing div, but I figured I’d just throw it all in this tutorial, in case you’re snooping in my main CSS file (tisk, tisk), and would then be wondering if it’s relevant or not.

HTML Code:

<div id="flickr">
<script type="text/javascript" src="http://flickr...">
</script>
</div>

CSS Code:

#flickr
{
  font: 9px Tahoma, sans-serif;
  margin: 0 15px 0 25px;
}

#flickr a
{
  display: block;
  float: left;
  padding: 0 1px 5px 4px;
  position: relative;
  height: 64px;
  width: 64px;
}

#flickr a:hover
{
  font-size: 100%;
  z-index: 1;
}

#flickr img
{
  border: 1px solid #ddc;
  padding: 1px;
  height: 60px;
  width: 60px;
}

#flickr a:hover img
{
  background: #fff;
  border-color: #000;
  position: absolute;
  width: 75px;
  height: 75px;
  top: -7px;
  left: -4px;
}

That’s it! No browser hacks or trickery required. Take that bit of code, tweak it to your liking, and you’ll have Hoverbox + Flickr working on your own site in no time. You will of course need your own Flickr Badge code, which you can get from their site. If you steal mine, you’ll just be showing off my photos. For a nice tutorial on actually using the JavaScript, read it on Hicks Design.

Discussion + Dissension

1. #1 Larry Tomlinson

   Snooping around in CSS files is wrong? But I get so much information! I like to look at people’s CSS, deconstruct it, and figure out how things are done (I always have, and always will be, a CSS noob).

   Regardless, interesting work on your flickrbox. I wish I took photos of stuff so I could experiment with it!

2. #2 Nathan Smith

   Larry: I think a little snooping for the cause of learning is permissible. What I don’t like is when I see an exact duplicate site linking to mine, because the person ripping me off hasn’t bothered to remove the links back to my site. Stuff like that, blatant copying bothers me. As far as learning goes, we all inevitably learn from each other, which is what makes the ‘net so great.

3. #3 Nathan Logan

   You rock – this is some sweet stuff.

4. #4 Nathan Smith

   Nate: You’re welcome! I hope it proves as beneficial to you as your PHP array randomizer code did for me. If anyone else is reading this, Nate helped me randomize the “featured work” on my index page. He’s the man, simply put.

5. #5 Nathan Logan

   Thanks, bro. It was hours upon hours of work (condensed into a minute or two, but still).

   Random PHP fact: PHP is a recursive acronym. It actually stands for “PHP: Hypertext Preprocessor”. That is, the first P stands for “PHP”, as follows (for you picture types):

   P – PHP:
   H – Hypertext
   P – Preprocessor

   Neat/cruel, eh?

6. #6 Nathan Smith

   Bleh, cut a brotha some slack man. Write me a MySQL search function that will go back through and fix all my all my old articles, okay? Now I get it, basically it’s sort of like all the rest of these acronyms right? I feel dumb.

7. #7 Julian Bennett Holmes

   So, if you expand it infinetly, wouldn’t it look like this:

   P – PHP:
   P – PHP:
   P – PHP:
   P – PHP:
   P – PHP:

   etc.

8. #8 Nathan Smith

   Julian: Yeah, I think that’s the idea behind recursive acronyms, which is probably why they are so confusing to people (myself included).

9. #9 James Mitchell

   Nice idea, I was wondering if you were going to do this with your hoverbox. Glad you did. Now if only I started using my flickr account more than I do – I could have something to use this for.

   Boy do I need to get with it!

10. #10 Nathan Smith

    James: Don’t feel bad. My wife is the photographer in our family, I just reap the benefits of having a regularly updated Flickr feed linked to on my site.

11. #11 Scott Offord

    Thanks for this code. I was playing around with my own and gave up with one final google search for hoverbox, lightbox, and flickr... and found your site. Fun. Thanks again.

12. #12 Nathan Smith

    Scott: You’re welcome. I think the bad thing about the mash-ups of effects is that they get confused with one another, and the search results get a bit mixed up. I’m glad you found this post, and that the code is working for you.

13. #13 Scott Offord

    :-) Nathan, It’s nice to see that you actively participate in your you website by commenting, etc. Your blog entry did help clarify. Thanks again.

Comments closed after 2 weeks.