**Adding the scripts**
The JS scripts (step 1) go in the element on your page. You need to include those before (i.e. above) invoking the script (step 2).

**Invoking the plugin**
Call the plugin in your element as well. Make sure the function call is inside a document ready block (like in step 2 above). Also make sure to change the selector (i.e. ‘img’ in the example above) to whatever hook makes sense for your site.

**Add the CSS**
Should be easy. Just make sure it’s in there somewhere.

**Adding Custom Captions**
Just add a normal “title” attribute to your image. The plugin will do there rest. Use CSS to style as needed.

Hope this helps,
Cory

Thanks for this article.

I’m busy trying to add captions to the images on this page of a wordpress site:

http://onedogchicken.com/productions/

I can’t precisely make sense of where to paste your code.

Essentially I need to pull up the title attributes to create captions on hover.

Any help/suggestions would be greatly appreciated!

Rob.

Here’s the steps in more detail.

1. Add an image somewhere inside your `body` element using a ordinary `img` tag

2. In `header.php`, add the javascripts listed in step 1 from the article. Keep in mind that the jQuery library must be listed first, above any other scripts. That’s because the other scripts rely on jQuery and the page is evaluated from top to bottom. I haven’t done WP development in a while, but I think they could go pretty much anywhere inside header.php. Try moving them around and refreshing the page if you have problems. Also make sure the paths to each script are correct. You can ensure that the scripts are properly loaded by checking the DOM in firebug.

3. Invoke the plugin by adding the snippet from step 2 of the article. This also goes in header.php. Make sure it’s below all the other scripts.

4. Add the CSS. This should be easy.

5. Reload the page and it should work.

Hope this helps.

You can add it to WordPress the same as you would any other jQuery plugin. You’ll need to follow the steps above, making sure to include the necessary scripts in header.php. Then add the markup to one of your templates.

If you need some help, send me an email directly. This is a WP blog and I’m using it on my portfolio page and, as I recall, there was no special WP integration necessary.

How can these be added to WP? I’d like to use for the “clients” section to provide more info when you rollover a logo.

You can do that with CSS. Float the images left to create a columns just like you would with any other layout. If it helps. You can see something similar on my own portfolio page.

Title of image (bold)
Description of image (not-bold, different font if needed)
–

I’m using thumbnails to show/hide the title of each – adding a short description would be
really beneficial… if possible.

Thanks dude.
Mike