jQuery Tutorials & Plugins

jQuery makes it easy to spice up our search bars and form input fields with simple touches that really enhances the user’s experience. Let’s look at how jQuery can be used to show/hide a default value inside a field and provide visual user feedback when the field is selected.
The example we’ll be creating features a [...]

This script have very simple usage;
Usage
Script:
$(document).ready(function(){
$(’img.captioned’).each(
function() {
var caption = $(this).attr(’title’);
$(this)
.wrap(’<div class="imgcontainer"></div>’)
.after(’<div class="caption">’+caption+’</div>’);
}
);
});
CSS:
.imgcontainer {
position:relative;
float:left;
}
.caption {
position:absolute;
bottom:0;
left:0;
text-align:center;
background:#fff;
width:100%;
opacity:.75;
filter:alpha(opacity=85);
color:#000;
}
.imgcontainer img {display:block;}
HTML:
<img src="images/news1.jpg" class="captioned" alt="" title="jQuery blog News#1" />
<img src="images/news2.jpg" class="captioned" alt="" title="jQuery blog News#2" />
Demo