Flickr & Hoverbox

— Topic: css

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 dimensions.

That being said, things should make sense in this case, assuming you've read and implemented 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="…"></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.

Me, elsewhere