Image Captions Generated with CSS and jQuery

This script have very simple usage;

Usage
Script:

01	$(document).ready(function(){
02	    $('img.captioned').each(
03	        function() {
04	            var caption = $(this).attr('title');
05	            $(this)
06	                .wrap('<div class="imgcontainer"></div>')
07	                .after('<div class="caption">'+caption+'</div>');
08	        }
09	    );
10	});

CSS:

01	.imgcontainer {
02	    position:relative;
03	    float:left;
04	    }
05	.caption {
06	    position:absolute;
07	    bottom:0;
08	    left:0;
09	    text-align:center;
10	    background:#fff;
11	    width:100%;
12	    opacity:.75;
13	    filter:alpha(opacity=85);
14	    color:#000;
15	    }
16	.imgcontainer img {display:block;}

HTML:

1	<img src="images/news1.jpg" class="captioned" alt="" title="jQuery blog News#1" />
2	<img src="images/news2.jpg" class="captioned" alt="" title="jQuery blog News#2" />

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

s3Slider jQuery Plugin & Tutorial

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …

jQuery Optimization: Avoid Unnecessary Selector

Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary…

Fading Links Using jQuery: dwFadingLinks

Earlier this month, we posted a MooTools script that faded links to and from a color during the mous…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…