Cacher is the code snippet organizer for pro developers

============================================THE CSS============================================

/* - - - - -fD
Images - jQ treamtent
	By default, all images are processed by the jQ, optional classes are:
		noAuto (stops jQ and CSS processing the img)
		left
		middle
		right
	2013-04-09-0817
		Dimensions are automatic, see jQ for how.
fD- - - - - */

	div.imgWrap {
		margin-bottom: 0.38em;
	}

	div.imgWrap img {
		padding: 5px;
		background: #f9f9f4;
		display: block;
		border: 1px solid #fff;
		box-shadow:	0px 2px 4px #999;
	}

	div.imgWrap.right {
		float: right;
		margin-left: 1.62em;
	}

	div.imgWrap.left {
		float: left;
		margin-right: 1.62em;
	}

	div.imgWrap.middle {
		margin-left: auto;
		margin-right: auto;
	}

	span.imgTitle {
		display: block;
		color: #eee;
		width: 75%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-top: 0.62em;
		font-size: 80%;
	}

============================================THE jQ CODE============================================

	/* - - - - -fD
	Images
		It is ESSENTIAL that the images dimensions are attributes in the HTML img tag for the below to work reliably.
		2013-04-09-0805
			Now uses outerWidth so the CSS can use any border or padding it wants and maths will still work.
			Assumes all IMGs will either have the class .noAuto or no class at all.
		2013-04-09-0831
			Possible enhancement
				Sniff if an IMG has a class at all and if it has do nothing.
	fD- - - - - */

		$( 'img:not(.noAuto)' ).each(function (i) {

			// Wrap the IMG in a DIV

			$( this ).wrap( '<div class="imgWrap"> </div>' );


			// Attempt to get alt text.
			// If alt then copy it into a SPAN at the end of the wrapping DIV.
			// If no alt text then output an error.

			var n = $( this ).attr('alt');

			if (n !== "") {
				$( this ).parent().append('<span class="imgTitle">' + n + '</span>');
			} else {
				$( this ).parent().append('<span class="imgTitle error">' + 'ERROR: Please supply ALT or set IMG to class .noAuto' + '</span>');
			}

			// Get the outer width of the img after the CSS has added padding, border etc.
			// Apply CSS to the wrapping DIV to set it's width to the outer width of the IMG.

			var q = $( this ).outerWidth();

			$( this ).parent().css('width', q);


			// Attempt to get the class of the img.
			// If a class was found apply the same class to the wrapping DIV.
			// If no class was found then assume 'right'.

			var r = $( this ).attr('class');

			if ( r ) {
				$( this ).parent().addClass( r );
			} else {
				$( this ).parent().addClass( 'right' );
			}
		});