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:
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
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
admin