Comments on: JQuery hover caption plugin.

By: vHv

vHv — Thu, 22 Mar 2012 01:24:11 +0000

Thank you fo reply. Trying vertical centering with different height =( …
another question … its possilbe to make the same but with multiple backs ( solid layer > image with opacity over solid and then caption overlay on hover?

By: Cory Schires

Cory Schires — Wed, 21 Mar 2012 15:17:05 +0000

Several people have now asked this. You can accomplish this with basic CSS.

Centering the text horizontally should only require `text-align: center`

Centering the text vertically is a little trickier. It depends on how you have things setup. I’d try `vertical-align: middle` or `margin-top: XXpx`.

By: vHv

vHv — Wed, 21 Mar 2012 12:47:27 +0000

Hi, liked, but how to center caption by width and height in crossbrousing (IE)?

By: Janu

Janu — Wed, 14 Mar 2012 05:37:01 +0000

This is great! Pretty much a beginner with this kind of stuff, I can’t seem to figure out how to center the caption vertically and horizontally within the image. Is there an easy way to do this?

By: annLouise

annLouise — Sat, 11 Feb 2012 16:05:08 +0000

Hello Cory
Great pluggin. I really want to use it on my site, but I am a complete newbie to WP and CSS. What do you mean by step 2: Call the plugin function on your images. Do I paste this code somewhere obviousi.e. below step 2 in the header? Also do I need JQuery Library to use aswell? Sorry! Please could you advise?

Thanks

By: Blog Post #10: Javascript Frameworks « orrachattack

Blog Post #10: Javascript Frameworks « orrachattack — Wed, 08 Feb 2012 15:11:20 +0000

[...] Hover Caption use of Hover Caption in a porfolio [...]

By: Cory Schires

Cory Schires — Mon, 12 Dec 2011 18:00:18 +0000

@Rob

**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

By: Rob

Rob — Mon, 12 Dec 2011 14:51:08 +0000

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

By: Cory Schires

Cory Schires — Tue, 16 Aug 2011 14:32:45 +0000

@Romy

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.

By: Romy

Romy — Tue, 16 Aug 2011 07:00:56 +0000

Hi Cory,
Thanks for this! As a total newcomer to WordPress, I need some clarification, please. In your first steps, it seems you need to drop text #1 into anywhere in header.php. Where do texts 2-4 go? I’m not sure what an image’s plugin function is. Thanks!
Romy