ITT #5: Transparent Overlay with Slide-Out Description

I'm going to try something a little different this week and talk about CSS. I'm working on a client project that needed to overlay a PNG over the top of various thumbnails in order to make the thumbnails sit in nicely with the design. I'd never done anything like this before, so I thought it might be worth sharing.

If you're deeply offended that I've strayed away from programming-related posts, let me know in the comments, but don't worry! I added some jQuery in for good measure!

View the Demo | Download the Files

The Markup

I'm a firm believer in using as few HTML elements and classes as possible. I also really hate seeing empty elements that only exist to have styles applied to them, so I try to make sure that every... read more

FlickrScrollr Explained: jQuery

This is a continuation of the FlickrScrollr explanation. In this post we'll explore the jQuery plugin behind the animation of the thumbnails.

Why jQuery?

I resisted the switch to jQuery for a long time, telling myself that using a JavaScript framework was some kind of copout—I was going to write my JavaScript from scratch, dammit! And, for a long time, I did exactly that. However, JavaScript is a finicky language, and it's supported differently on each browser. Testing was cumbersome, exhausting, and entirely too stressful. I felt like I was putting too much into the relationship. I lost sleep, lost my appetite, and left long, slurred messages on JavaScript's answering machine at 3AM.

"Hullo? Jahv-Scripp? I juss wann know: why you gotta make me use element.style AND element.currentStyle? You wanna know why? Iss cuz... read more

ITT #4: Plugin Giveaway - FlickrScrollr

UPDATE: I've posted a new entry explaining FlickrScrollr. Please refer to that article for better implementation instructions, as well as a breakdown of how the code works.

In an effort to squeak in this week's Instant Tip Tuesday before midnight, I'm going to give away a PHP+jQuery plugin to create an animated Flickr module on your site. I call it FlickrScrollr.

View the Demo | Download the Files

What Is FlickrScrollr?

FlickrScrollr is a combination of PHP5, jQuery, and CSS. It utilizes PHP's SimpleXML extension to parse a user's Flickr RSS feed, then uses jQuery to add animation to the generated display of thumbnails, finally topping off the fun with Leandro Vieira Pinho's jQuery Lightbox plugin.

How Do I Use FlickrScrollr?

To implement FlickrScrollr... read more