Skip to content

Instantly share code, notes, and snippets.

@alanfluff
Created March 22, 2013 21:11
Show Gist options
  • Save alanfluff/5224780 to your computer and use it in GitHub Desktop.
Save alanfluff/5224780 to your computer and use it in GitHub Desktop.
[CSS jQuery] Image treatment
============================================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' );
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment