shareLogo

by Umar

HTML

<html>
    <body>
        <div class="header">
            <a href="#" class="logo"></a> 
        </div>
        <p>
            Right click the logo above for a demonstration.<br />
            <br />
            Various logo size example:
            <pre>
var logo1 = {
    name: 'White Logo',
    thumbSrc: 'http://doc.jsfiddle.net/_images/jsfiddle-logo-white-thumb1.png',
    size: [{
        label: 'High Res',
        filesize: '230kb',
        src: 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white1.png'
    }, {
        label: 'Low Res',
        filesize: '23kb',
        src: 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white1.svg'
    }]
};
            </pre>
            Various types example with no name:
            <pre>
var logo2 = {
    name: '',
    thumbSrc: 'http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb1.png',
    type: [{
        label: 'PNG',
        src: 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo1.png'
    }, {
        label: 'AI',
        src: 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo1.ai'
    }, {
        label: 'SVG',
        src: 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo1.svg'
    }]
};
            </pre>
            Using a custom title and message:
            <pre>
$('.logo').shareLogo({title: 'Is this what you wanted?', message: 'You\'re welcome.'}, [logo1, logo2]); 
            </pre>
            Use default title and message:
            <pre>
$('.logo').shareLogo([logo1, logo2]); 
            </pre>            
        </p>
    </body>
</html>

CSS

body { 
    font-family: Helvetica;
    font-size: 10pt;
    background-image: url(http://jsfiddle.net/img/top-bg.png);
    background-repeat: repeat-x;
}
.header {
    height: 40px; 
}
pre {
    background-color: #f0f0f0;
    border: 1px #c0c0c0 dashed;
    margin: 10px 10px 25px 10px;
    padding: 10px;
    overflow: auto;
}

pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

pre::-webkit-scrollbar-track-piece {
    margin-bottom: 10px;
    background-color: #E5E5E5;
    border-bottom-left-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;
}
.logo {
    background-image: url(http://jsfiddle.net/img/logo.png);
    display: block;
    height: 25px;
    width: 160px;
}
.sl-box {
    background-color: rgba(0,0,0,0.2);
    border: 5px solid rgba(0,0,0,0.2);
    border-top: 0px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
}
.sl-inner {
    background-color: #fff;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    padding: 10px 20px 10px 20px;
    zoom: 1;
}

.sl-inner:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.sl-inner h1 {
    font-weight: bold;
}

.sl-inner p {
    font-size: 10pt;
    padding: 0px 0px 20px 0px;
}

.sl-box .sl-close {
    height: 16px; 
    width: 16px;
    background-color: #5AA4D7;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: center;
    font-size: 8pt;
    font-weight: bold;
    cursor: pointer;
}

.sl-box .sl-close:after {
    content: "x"
}

.sl-logo {
    width: 120px;
    float: left;
    margin-right: 20px;
    text-align: center;
}
.sl-logo:last-child {
    margin-right: 0px;
}
.sl-logo h3 {
    font-size: 10pt;
   ...

JavaScript

/* shareLogo jQuery Plugin by overra
 * - inspired by akismet.com's shareLogo-like feature.
 */
(function($) {
    $.fn.shareLogo = function() {
        var options = {
            title: 'Looking for our logo?',
            message: 'Here are some to choose from:'
        };

        if (arguments[0] instanceof Array) {
            logos = arguments[0];
        }
        else if (arguments[0] instanceof Object) {
            logos = arguments[1];
            $.extend(options, arguments[0]);
        }

        var logoHtml = [],
            menuHtml = $('<div>').addClass('sl-box').append($('<div>').addClass('sl-inner').append($('<h1>').html(options.title)).append($('<p>').html(options.message))).append($('<div>').addClass('sl-close').html('').click(function() {
                $('.sl-box').slideUp();
            })),
            offsetLeft;

        $('body').append($(menuHtml).hide());

        var i, x, logo;
        for (i in logos) {
            if (logos[i]) {
                var list = $('<ul>').addClass('sizes');
                if (logos[i].size) {
                    for (x in logos[i].size) {
                        if (logos[i].size[x]) {
                            $(list).append($('<li>').html($('<a>').attr({
                                'href': logos[i].size[x].src,
                                'target': '_newwindow'
                            }).html(logos[i].size[x].label)).append($('<div>').html(logos[i].size[x].filesize)));
                        }
                    }
                } else if (logos[i].type) {
                    list = $('<div>').addClass('types');
                    for (x in logos[i].type) {
                        if (logos[i].type[x]) {
                            $(list).append($('<a>').attr({
                                'href': logos[i].type[x].src,
                                'target': '_newwindow'
                            }).html(logos[i].type[x].label)).append(' ');
                        }
    ...