Simple image captions
Posted: Mon Sep 01, 2008 11:01 pm
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:
3. In your CSS file, place the following, adjusting for float, margins, padding, font-size, etc. as needed:
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.
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>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;
}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.
