Bildunterschriften mit JCaption

Codeschnipsel

JQuery macht das Programmieren einfacher JQuery macht das Programmieren einfacher
Mit JCaption kann man einfach Bildunterschriften realisieren. Standardmässig werden diese jedoch nur so breit wie die Unterschrift selbst dargestellt. Ich wollte jedoch, dass sie 100% der Breite einnehmen, was mit einer kleinen Erweiterung des Quellcodes nun möglich ist. Unsere Änderung sieht folgendermassen aus:

100% width hack
1
2
3
4
5
6
7
//Enable 100% Width > works only with block elements
if(settings.enableFullWidth){
//Get the inner wrapper width - 2 * padding of captionElement
var adjustedsize = div.innerWidth() - 2 * div.find(settings.captionElement).css("padding-top").replace("px", "");
//Adjust the captionElement width
div.find(settings.captionElement).css("width",adjustedsize)
};

Natürlich, müssen noch die "settings" mit "enableFullWidth" erweitert werden. Das Ganze sieht dann so aus:

/*
* Copyright (C) 2009 Joel Sutherland
*
* Modified 2011 Daniel Studhalter
* www.erbenux.com
*
* Licenced under the MIT license
* http://www.newmediacampaigns.com/page/jcaption-a-jquery-plugin-for-simple-image-captions
*/
(function($) {
$.fn.jcaption = function(settings) {
settings = $.extend({
// 100% width hack
enableFullWidth: true,
// "old" settings
wrapperElement: 'div',
wrapperClass: 'caption',
captionElement: 'p',
imageAttr: 'alt',
requireText: true,
copyStyle: false,
removeStyle: true,
removeAlign: true,
copyAlignmentToClass: false,
copyFloatToClass: true,
autoWidth: true,
animate: false,
show: {opacity: 'show'},
showDuration: 200,
hide: {opacity: 'hide'},
hideDuration: 200
}, settings);

return $(this).each(function(){

//Only add the caption after the image has been loaded. This makes sure we can know the width of the caption.

$(this).bind('load', function(){

//Make sure the captioning isn't applied twice when the IE fix at the bottom is applied
if($(this).data('loaded')) return false;
$(this).data('loaded', true);

//Shorthand for the image we will be applying the caption to
var image = $(this);

//Only create captions if there is content for the caption
if(image.attr(settings.imageAttr).length > 0 || !settings.requireText){

//Wrap the image with the caption div
image.wrap("");

//Save Image Float
var imageFloat = image.css('float')

//Save Image Style
var imageStyle = image.attr('style');
if(settings.removeStyle) image.removeAttr('style');

//Save Image Align
var imageAlign = image.attr('align');
if(settings.removeAlign) image.removeAttr('align');

//Put Caption in the Wrapper Div
var div = $(this).parent().append('' + image.attr(settings.imageAttr) + '');

if(settings.animate){
$(this).next().hide();
$(this).parent().hover(
function(){
$(this).find(settings.captionElement).animate(settings.show, settings.showDuration);
},
function(){
$(this).find(settings.captionElement).animate(settings.hide, settings.hideDuration);
});
}

//Copy Image Style to Div
if(settings.copyStyle) div.attr('style',imageStyle);

//If there is an alignment on the image (for example align="left") add "left" as a class on the caption. This helps deal with older Text Editors like TinyMCE
if(settings.copyAlignmentToClass) div.addClass(imageAlign);

//Transfers the float style from the image to the caption container
if(settings.copyFloatToClass) div.addClass(imageFloat);

//Properly size the caption div based on the loaded image's size
if(settings.autoWidth) div.width(image.width());

//Enable 100% Width > works only with block elements
if(settings.enableFullWidth){
//Get the inner wrapper width - 2 * padding of captionElement
var adjustedsize = div.innerWidth() - 2 * div.find(settings.captionElement).css("padding-top").replace("px", "");

//Adjust the captionElement width
div.find(settings.captionElement).css("width",adjustedsize)
};
}
});

// Thanks to Captify for this bit!
//if the image has already loaded (due to being cached), force the load function to be called
if (this.complete || this.naturalWidth > 0){
$(this).trigger('load');
}
});
}
})(jQuery);
Nun kann man das modifizierte JCaption ganz normal einbinden. Man beachte, dass der Hack nur mit Block-Elementen funktioniert, bzw. mit Elementen die als Block definiert wurden. Hier ein kleines Beispiel:

Aufruft von JCaption
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
// Die Bildunterschriften
$('#content img').not('.buttonheading img').not('.contentpaneopen_edit img').jcaption({
wrapperElement: 'span',
captionElement: 'span',
animate: true,
copyStyle: true,
removeAlign: false,
requireText: true,
copyFloatToClass: true,
show: {opacity: 'show'},
showDuration: 300,
hide: {opacity: 'hide'},
hideDuration: 700,
autoWidth: true
});
});

Auf das Span Element werden die folgenden CSS Anweisungen angewandt:

Caption CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#content span.caption{
background-color: #ffffff;
border: 1px solid #c7c7c7;
position: relative;
padding:5px;
}
 
#content span.caption span{
background:none repeat scroll 0 0 black;
bottom:0;
color:white;
left:0;
margin:0;
opacity:0.7;
padding:4px;
position: absolute;
font-size:0.9em;
text-align:left;
}

Kommentar schreiben