Picsona jQuery Style

Proof of concept using data driven elements to build images with author-meta cards.

by psyne

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdn.jsdelivr.net/prefixfree/1.0.7/prefixfree.dynamic-dom.min.js"></script>
<div id="container" class="container" style="max-width: 800px; margin: 0 auto;">
    <div class="hero-unit picsona" data-image="http://lorempixel.com/800/400/sports/6/" data-height="270" data-author="Mr Freeze" data-title="Kick the sun..."></div>
    <div class="hero-unit picsona" data-image="http://lorempixel.com/800/400/sports/5/" data-height="270" data-author="Captain Cold" data-title="Awesome bike trick!"></div>
    <div class="hero-unit picsona" data-image="http://lorempixel.com/800/400/sports/4/" data-height="270" data-author="Killer Frost" data-title="Grabbing some major curl!"></div>
    <div class="hero-unit picsona" data-image="http://lorempixel.com/800/400/sports/3/" data-height="270" data-author="Icicle" data-title="Not Lance Armstrong..."></div>
    <div class="hero-unit picsona" data-image="http://lorempixel.com/800/400/sports/2/" data-height="270" data-author="Aqualad" data-title="Setting up for a killer wave"></div>
    <div class="hero-unit picsona" data-image="http://lorempixel.com/800/400/sports/1/" data-height="270" data-author="Mr Twister" data-title="Is cricket even a game? Get your hand off my sticky wicket!"></div>
</div>

CSS

#container .alert.alert-block.author-card {
    height: 240px;
    box-shadow: 1px 1px 10px 1px #555;
}

JavaScript

$(document).ready(function () {
    var $picsona = $('.picsona');
    $.extend($, {
        interpolate: function (t, o, s) {
            var m = (!s) ? /{([^{}]*)}/g : s;
            if (s) m = s;
            return t.replace(m, function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            });
        }
    });
    $.each($picsona, function () {
        var $this = $(this),
            $background = $this.data('image'),
            $background_height = $this.data('height'),
            $author = $this.data('author'),
            $title = $this.data('title'),
            $background_url = 'url("' + $background + '")',
            data_obj = {
                author: $author,
                title: $title,
                url: $background
            },
            data_template = '<div class="alert alert-block author-card"><h4>Picsona Author Card</h4><ul><li>{author}</li><li>{title}</li><li><a target="_blank" href="{url}">{url}</a></li></ul></div>',
            $data_card = $.interpolate(data_template, data_obj);

        $this.css({
            'background-image': $background_url,
                'height': $background_height
        }).append($data_card);

        $this.find('.author-card').hide()
    });
    $picsona.hover(function () {
        var $this = $(this);

        $this.find('.author-card').fadeIn('slow');

    }, function () {
        var $this = $(this);
        $this.find('.author-card').fadeOut('slow');
    });
});