show me everything

flickr API toy utilizing jQuery Masonry.

by namuol

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div id='header'>
    <a href='#' attr-tag=''>show me <span class='tag'>everything</span></a>
</div>
<div id='left'>
    <div id='tags'></div>
</div>
<div id='images'></div>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* { padding: 0; margin: 0; border: 0; }

body {
    font-family: Helvetica, Arial, Verdana;
    color: #fff;
    margin: 0;
    padding: 0px;
    background: #000;
    overflow-x: hidden;
}

#header {
    font-size: 52pt;
    position: fixed;
    top: 0;
    background: #000;
    z-index: 4;
    width: 100%;
    margin: 0;
    padding: 10px;
    height: 100px;
}

#left {
    position: fixed;
    margin:0;
    padding:10px;
    float: left;
    width: 300px;
    top: 100px;
}

#images {
    margin-left: 250px;
    margin-top: 100px;
    /*width: 640px;*/
}

img {
    padding: 0;
    margin: 0;
    width: 100%;
    -moz-transition-property: width,opacity;
    -moz-transition-duration: 0.25s;
    -webkit-transition-property: width,opacity;
    -webkit-transition-duration: 0.25s;
    z-index: 1;
}

.box.img.animooted img {
    opacity: 0.35;
}

.box.img.animooted.zoomed {
    width: 640px;
    z-index: 2;
    -moz-transition-property: all;
    -moz-transition-duration: 0.25s;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.25s;
    opacity: 1.0;
    margin-bottom: -8px;
}

.box.img.animooted.zoomed img, .box.img.animooted:hover img {
    opacity: 1.0;
}

.box.img {
    background: #000;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    margin-bottom: -4px; /*wtf hack*/
    width: 160px;
    float: left;
    z-index: 1;
}

.box.img.animooted {
    -moz-transition-property: all;
    -moz-transition-duration: 0.25s;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.25s;
    opacity: 1.0;
}

#msg {
    font-size: 20pt;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 45%;
}


a:hover .tag {
    opacity: 1.0;
}

.selected .tag {
    color: red;
}

.tag {
    font-weight: bold;
    opacity: 0.5;
}

a {
    text-decoration: none;
    color: #fff;
}

JavaScript

$(function() {
    var $images = $('#images'),
        $msg = $('#msg'),
        taglessReq="http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=def1ef576200455cc0c9620fc468f589&per_page=100&format=json&nojsoncallback=1&extras=tags,o_dims"
        tagReq = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=def1ef576200455cc0c9620fc468f589&per_page=100&format=json&nojsoncallback=1&extras=tags,o_dims&tags=";
    
    function tagListElement(tags) {
        var el = $('<ul>');
        $.each(tags, function(i,tag) {
            if (tag) {
                el.append(
                    $('<li>').append(
                        $('<a>').attr('href','#')
                                .attr('attr-tag', tag)
                                .html('show me <span class="tag">'+tag+'</span>')));
            }
        });
        return el;
    }
    
    $('a').live('click', function() {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
        showMe($(this).attr('attr-tag'));
        return false;
    });
    
    $('.box.img').live('click', function () {
        if (!$(this).hasClass('zoomed')) {
            $(this).children('img').removeAttr('width').removeAttr('height');
            $('.zoomed').removeClass('zoomed');
            $(this).addClass('zoomed');
            var tags = $(this).attr('attr-tags').split(' ');
            if (tags[0])
                $('#tags').html(tagListElement(tags));
            var el = $(this),
                src = el.children('img').attr('src'),
                hi_res = $('<img>')
                          .attr('src',
                                src.replace('_m.jpg','_b.jpg'));
            hi_res.imagesLoaded(function () {
                el.children('img').replaceWith(hi_res);
            });
            setTimeout(function () {
                console.log(el.offset());
                $('html,body').animate({
                    scrollTop:...