JQuery hover caption plugin.

Here’s a simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image. For example:

Flapper 1922

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.

Download the project from github

Tags: ,

23 Comments

Your thoughts?

Preview