Bildunterschriften mit JCaption

Geschrieben von: @studipiepst Sonntag, den 16. Januar 2011 um 12:53 Uhr

Codeschnipsel

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)
};

/*
* 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);

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
        });
});

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;
}