JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<center>
<div class='blogger-image' data-config='{"blogUrl": "beben-koben.blogspot.com", "showMax": 10}'></div>
<p></p>
<div class='blogger-image' data-config='{"blogUrl": "ben-tools.blogspot.com", "showMax": 10}'></div> 
</center>
    <div class="cred" align="center">Creativity by <a href="http://beben-koben.blogspot.com/">Beben Koben</a></div> 
<footer>
    <a class="orig"  href="http://beben-koben.blogspot.com/2011/09/view-image-blogger-with-jquery.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://beben-koben.blogspot.com/2011/09/view-image-blogger-with-jquery.html">View Image Blogger with jQuery</a></h2>
</footer>

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited
{
    text-decoration:none;
    outline:none;
    color:#a00;
}
a:hover
{
    color:#fff;
}
footer
{
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h2
{
    font:25px/26px Acens;
    font-weight:bold;
    left:70%;
    margin:0 20px 0 0;
    padding:20px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
-moz-box-shadow:0px 0px 20px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000;    
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    border:none;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{
    margin:400px 0 0 0;
}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.blogger-image img {
border:3px solid #555555;
background-color: #AAAAAA;
padding: 5px;
margin: 5px;
width: 75px;
height: 75px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.blogger-image img:hover {
background-color: #FF6600;
  -webkit-transform: scale(1.5);  
  -moz-transform: scale(1.5);  
  -o-transform: scale(1.5);  
  -moz-box-shadow:0px 0px 10px rgba(0,0,0,.7);  
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.7);  
  box-shadow:0px 0px 10px rgba(0,0,0,.7); 
  -webkit-transition: all 500ms ease-in 50ms;
    -moz-transition: all 500ms ease-in 50ms;
    -o-transition: all 500ms ease-in 50ms;
    transition: all 500ms ease-in 50ms;
    cursor:pointer;
}

JavaScript

var jsBloggerCollage = function(){
        var $collages = [],
        init = function(){
            var $tempCollages = jQuery(".blogger-image");
             
            $tempCollages.each( function() { //spawn off a collage for each item
            $collages.push(new Collage($(this) ) )
            });          
        };
        function Collage(parent) {
        var $parent = parent,
        config = {
        "blogUrl": "",
        "maxResults": "1000",
        "showMax": 10,
    },
        init = function() {
        //load config options and clean if needed
            jQuery.extend(config, jQuery.parseJSON( $parent.attr("data-config") ) )
            if(config.blogUrl > "") { //only request if valid url
        //clean blogUrl
                    config.blogUrl = config.blogUrl.replace(/\/$/, ""); //remove trailing backslash
                    var index = config.blogUrl.search(/(?:(http\:\/\/|https\:\/\/))/i);
        if(config.blogUrl.search(/(?:(http\:\/\/|https\:\/\/))/i) === -1) { //prepend http:// if not found
        config.blogUrl = config.blogUrl.replace(/[\/:]/, ""); //remove backslashes and : just in case
        config.blogUrl = "http://" + config.blogUrl;
    }
                var qs = {
                    alt : "json",
                        "max-results": config.maxResults
                },
                    url = config.blogUrl + "/feeds/posts/summary?callback=?";
                    jQuery.getJSON(url, qs, process);
    }
            else {
            $parent.append("<h3>Invalid blogUrl Provided</h3>");
        }
    },
            process = function(data, status, xhr) {
            var i = 0,
            nShown = 0,
                entries = data.feed.entry,
            //$picTemplate = $("<span><img></img></span>"),
                $pic;
                 
                    for (i; i < entries.length; i++) {
                        if(entries[i].media$thumbnail){
                            $pic = jQuery("<span...