I've tried to read the issue que carefully and integrate what's been already talked about into a more robust image_caption.js. I am would appreciate any troubleshooting to get IE working since 60% of my site traffic is IE.
Browsers Checked
Firefox 3.5.6 Working
Chrome 4.0.2 Working
Internet Explorer 8.0.7 Broken
/*$Id: image_caption.js,v 1.1 2008/02/23 06:24:07 davidwhthomas Exp $*/
$(document).ready(function(){
$("img.caption").each(function(i) {
if ($(this).width()) {
// This image has a width and is ready to go
process_image(this);
} else {
// This image has a width of zero and may not be completely loaded,
// so we'll wait for the load event
$(this).load(function(){
process_image(this);
});
}
});
});
function process_image(img) {
var imgwidth = $(img).width();
imgwidth += parseInt($(img).css("padding-left"), 10) + parseInt($(img).css("padding-right"), 10);
imgwidth += parseInt($(img).css("margin-left"), 10) + parseInt($(img).css("margin-right"), 10);
var imgheight = $(img).height();
var captiontext = $(img).attr('title');
var alignment = $(img).attr('align');
if (!alignment) {
var alignment = $(img).css("float");
}
// Do not display a caption if the title attribute is blank
if (captiontext) {
$(img).attr({align:""});
// Add an alignment class to the container so we can style margins and padding
if (alignment == 'left' || alignment == 'right') {
$(img).wrap("<div class=\"image-caption-container\" style=\"float:" + alignment + "\"></div>");
$(img).parent().addClass('caption-' + alignment);
} else {
$(img).wrap("<div class=\"image-caption-container-center\"></div>");
}
$(img).parent().width(imgwidth);
$(img).parent().append("<div class=\"image-caption\">" + captiontext + "</div>");
}
}
.image-caption-container{
border:1px solid #ccc;
background-color:#F7F7F7;
padding: 5px;
}
.image-caption-container-center{
border:1px solid #ccc;
background-color:#F7F7F7;
padding: 5px;
padding-right: 11px;
}
div.image-caption-container-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.caption{
margin-bottom:5px;
}
.image-caption{
text-align:center;
font-size:80%;
color:#666666;
}
.image-caption a{
text-decoration: none;
color:#666666;
font-weight: normal;
}
.image-caption a:hover{
text-decoration: underline;
}
.caption-right{margin-right:5px; margin-left:10px; padding-left:11px; padding-right: 5px;}
.caption-left{margin-right:10px; margin-left:5px; padding-left:5px; padding-right: 11px; }
.caption-center{margin-right:10px; margin-left:10px;}
| Comment | File | Size | Author |
|---|---|---|---|
| image_caption.jpg | 386.93 KB | bryancasler |