Hallo zusammen,

damit meine Seite auch geteilt werden kann, habe ich ein jQuery Plugin dafür gesucht und gefunden (http://voidtricks.com/flati-social-share-plugin-jquery/).

  
(function(e){e.fn.flati=function(t){var n={skin:"rasgulla",triggerPosition:"left",containerBg:"#a2a2a2",containerBorder:"#dee2e2",iconBg:"#dee2e2",iconHover:"#ffffff",hoverEffect:"jump"};var r=e.extend({},n,t);var i= window.location.href; var j= window.location.host+""+window.location.pathname; if(r.hoverEffect=="jump"){var s="overflow: hidden;"}else{var s="overflow: visible;"}return this.each(function(){e(this).prepend('<div id="sTrigger" style="'+r.triggerPosition+': 0; "><img src="skins/'+r.skin+'/trigger.png"></div><div id="sClose" style="display:none; '+r.triggerPosition+': 0;"><img src="skins/'+r.skin+'/close.png"></div><div id="shareContainer" style="background:'+r.containerBg+"; "+s+" border-bottom: 10px solid "+r.containerBorder+';"></div>');e("#shareContainer").html('<a href="http://facebook.com/sharer.php?u='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/facebook.png" style="background:'+r.iconBg+';"></a><a href="http://plus.google.com/share?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/google.png" style="background:'+r.iconBg+';"></a><a href="http://twitter.com/share?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/twitter.png" style="background:'+r.iconBg+';"></a><a href="http://www.pinterest.com/pin/create/button/?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/pinterest.png" style="background:'+r.iconBg+';"></a><a href="http://www.linkedin.com/shareArticle?mini=true&url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/linkedin.png" style="background:'+r.iconBg+';"></a><a href="http://stumbleupon.com/submit?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/stumbleupon.png" style="background:'+r.iconBg+';"></a><a href="http://tumblr.com/share/link?url='+j+'" target="_BLANK"><img src="skins/'+r.skin+'/tumblr.png" style="background:'+r.iconBg+';"></a><a href="http://reddit.com/submit?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/reddit.png" style="background:'+r.iconBg+';"></a><a href="http://www.digg.com/submit?url='+i+'" target="_BLANK"><img src="skins/'+r.skin+'/digg.png" style="background:'+r.iconBg+';"></a>');e("#sTrigger").click(function(){e("#shareContainer").slideDown(300);e(this).fadeOut(200);e("#sClose").fadeIn(200)});e("#sClose").click(function(){e("#shareContainer").slideUp(300);e(this).fadeOut(200);e("#sTrigger").fadeIn(200)});e("#shareContainer img").each(function(){e(this).hover(function(){e(this).css("background",r.iconHover);if(r.hoverEffect=="jump"){e(this).animate({top:"-20px"},100)}});e(this).mouseout(function(){e(this).css("background",r.iconBg);if(r.hoverEffect=="jump"){e(this).animate({top:"0px"},100)}})})})}})(jQuery)

Der Aufruf:

    $(document).ready(function () {  
        $("body").flati({  
                skin: "round",  
                containerBg: "#C3C3C3",  
                containerBorder: "rgba(000,000,000,0)",  
                iconBg: "#FFFFFF",  
                iconHover: "#FFFFFF",  
                triggerPosition: "left"  
        });  
    });

Nach dem Einbauen und Anpassen fand ich das Design so gelungen, dass ich gerne die Sprachauswahl in der selben Weise hätte. Zweimal mit verschiedenen Optionen kann man die Funktion jedoch nicht aufrufen, sodass ich versucht habe, den Code umzuschreiben und aus der flati Funktion eine angepasste language Funktion zu machen. Dabei soll lediglich der Trigger auf die rechte Seite gestellt und ein anderer Skin (mit anderen Links) eingestellt werden. Alles kein Problem: Einen neuen Skin habe ich erstellt und die Links kann ich ohne Problem im Code ändern.

Das Problem: Ein einfaches Umbenennen von e.fn.flati=function zu e.fn.language=function und der folgende Aufruf funktioniert nicht:

  
    $(document).ready(function () {  
    $("body").language({  
                skin: "language",  
                containerBg: "#C3C3C3",  
                containerBorder: "rgba(000,000,000,0)",  
                iconBg: "#FFFFFF",  
                iconHover: "#FFFFFF",  
                triggerPosition: "right"  
        });  
    });  

Wurden vielleicht globale Variablen benutzt, die sich dann überschneiden oder warum funktioniert das nicht?

Ich wäre sehr dankbar für schnelle und hilfreiche Antworten und habt bitte ein Nachsehen mit mir, da ich wirklich ein Anfänger in dem Bereich bin. :)

MfG
der hoffentlich bald nicht mehr ratlose Ratlose

PS: Der CSS-Code sollte dafür eigentlich nicht von Belang sein, aber falls gewünscht, werde ich ihn noch hinzufügen.