Simple image captions

[kanjigirl]

I tried a few of the recommended image caption solutions in the forums and had issues, but today I found something that works very nicely. I can't take the credit - it belongs to http://www.askthecssguy.com/examples/examplesUsingjQuery/imageCaptions.html - but I will share my implementation.

You can see it in action here: http://www.redkitecreative.com/projects/naww/

1. Get the latest copy of jquery; I saved mine into the /lib folder.

2. In your template header, place the following:

Code: Select all

<__script__ type="text/javascript" src="lib/jquery-1.2.6.js"></__script>

Code: Select all

<__script__ type="text/javascript">
         $(document).ready(function(){
	 $('img.captioned').each(
	    function() {
		var caption = $(this).attr('title');
		$(this)
	        	.wrap('<div class="imgcontainer"></div>')
			.after('<div class="caption">'+caption+'</div>');
		      }
	          );
             });
           </__script>

3. In your CSS file, place the following, adjusting for float, margins, padding, font-size, etc. as needed:

Code: Select all

.imgcontainer {
	position: relative;
	float: right;
        margin:0.5em 0 1em 1em;
}
.caption {
	position: absolute;
        padding: 0.1em 0.2em;
	bottom: 0;
	left: 0;
        font-size: 0.9em;
	text-align: center;
	color: #000;
        background: #fff;
	width: 100%;
	opacity: .75;
	filter: alpha(opacity=85);
}
.imgcontainer img {
        display: block;
}

3. When you add an image to a page, add the caption you want in the 'title' box. On the Appearance tab select 'value' from the Class drop-down menu and type in 'captioned.' Update the image, save the page.

What you should get is an image with a semi-transparent bar at the bottom and the title text you entered displayed as the caption. This works fine in FF, Safari (for Windows at least), IE7, IE6, and Opera.

[Russ]

I think that works quite well but there a quite a few image/title solutions which use only CSS? They maybe a bit more complicated to setup but they are lighter in weight and I think your solution is causing invalid markup for the page? Also you could use the album module for individual images?

You could also just add the text to the image before displaying, with the PHP GD stuff or indeed, just add it to the actual image?

Having said that it is a nice looking site, it is amazing what people can do with wheat, I will never eat my breakfast cereal in the same way again

Russ

[kanjigirl]

How can I get a CSS-only option to automatically generate a caption from the img title or alt attribute for my totally computer-phobic clients? If you can point me toward something that does it, I'd be happy to use it...  Adding it to the actual image was one of my first thoughts but again, not something they'd take well to - even resizing images is a chore.

Thanks for the compliment on the site.

[Russ]

To be honest if it works for them stick with it?