JQuery hover caption plugin.
January 7th, 2010
Here’s a simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image. For example:
How to make it work.
1. Drop these scripts in your header:
<script src="js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.hover_caption.js" type="text/javascript" charset="utf-8"></script>
2. Call the plugin function on your images:
$(document).ready(function() {
$('img').hover_caption();
});
3. Add this tiny bit of CSS somewhere:
.hover_caption {
background-image: url(hover_caption_bg.png);
/* NOTE: if you're img elements have paddings
or margins you'll need to match them here
to get things lined up properly. */
}
And here’s some configuration options:
$('img').hover_caption({
caption_font_size: '18px',
caption_color: 'white',
caption_bold: true,
caption_default: "Click for screenshots."
});
And the captions are pretty smart.
If your image has a title attribute, the plugin will use that as the caption. Otherwise it will default to Click for screenshots. You can change the default if you like, of course.
A few gotchas.
- Be sure the path to hover_caption_bg.png is correct.
- Don’t forget to add hover_caption_bg.png to your project.
- Be sure the path to hover_caption.js is correct.
- Make sure you’ve referenced jQuery first in your header.
Awesome!
Reply
January 7th, 2010
rob[...] 10. JQuery hover caption plugin [...]
February 10th, 2010
10 Stylish jQuery caption pluginsThis is great but what if I don’t want a caption on a particular image?
Reply
May 22nd, 2010
CharlieDumb question I guess you can just use the jquery element selector to select something other than $(‘img’).hover_caption();
obviously I am still new to jquery
Reply
May 22nd, 2010
Charlie@Charlie
Not exactly sure what you’re asking. You can specify which images the plugin will be applied to by using a CSS selector. So if you want to apply the hover effect to every img element on the entire page, you’d use:
$(‘img’).hover_caption();
But if you’re looking to apply the plugin to a smaller set of images, you’ll need to first add a class to each of those images (e.g. class=”use_hover”). Then you’ll need to adjust the plugin’s css selector accordingly. For example:
$(‘img.use_hover’).hover_caption();
That would then call the plugin on all images with a class of ‘use_hover’.
Hope that clears up the confusion. If not, lemme know.
Reply
May 23rd, 2010
Cory SchiresWill this work with a lightbox?
Reply
June 8th, 2010
Jason Day@Jason
I don’t see why not. It’s a fairly simple plugin. But generally, packing lots of javascript into a lightbox can be problematic – at least in my experience. Make sure your lightbox plugin is solid.
Some advice. Try to steer clear of iframes if you’re trying to pack complicated functionality into a lightbox. You’ll have fewer bugs if you can load the content from a hidden inline div.
Reply
June 8th, 2010
adminCory – maybe i’m missing the obvious. is there anyway to add, say, a “description” to the caption? The example that comes to mind would work like this:
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
Reply
September 14th, 2010
mikeWhat if you want to arrange the pictures horizontally, one besides the other?
Reply
@karlito
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.
July 15th, 2011 Cory Schires
July 15th, 2011
KarlitoGreat stuff Cory! Beautiful script. Thank you very much. Keep up the awesome work.
Reply
July 15th, 2011
karlitoAs someone who doesn’t know a lot of coding AT ALL … I work with WordPress
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.
Reply
@greg
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.
July 29th, 2011 Cory Schires
July 27th, 2011
GregHi 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
Reply
@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.
August 16th, 2011 Cory Schires
August 16th, 2011
RomyHi 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.
Reply
@Rob
**Adding the scripts**
element on your page. You need to include those before (i.e. above) invoking the script (step 2).The JS scripts (step 1) go in the
**Invoking the plugin**
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.Call the plugin in your
**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
December 12th, 2011 Cory Schires
December 12th, 2011
Rob[...] Hover Caption use of Hover Caption in a porfolio [...]
February 8th, 2012
Blog Post #10: Javascript Frameworks « orrachattackHello 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
Reply
February 11th, 2012
annLouiseThis 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?
Reply
March 13th, 2012
JanuHi, liked, but how to center caption by width and height in crossbrousing (IE)?
Reply
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`.
March 21st, 2012 Cory Schires
March 21st, 2012
vHvThank 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?
Reply
March 21st, 2012
vHv