flickr photos

by erick

HTML

<script src="http://hafriedlander.github.com/jquery.entwine/js/jquery.entwine-dist.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://github.com/taitems/Aristo-jQuery-UI-Theme/raw/master/css/Aristo/jquery-ui-1.8.5.custom.css">
<div id="toolbar">
    <button id="toolbar_add">Add Photo List</button>
    <button id="toolbar_remove">Remove Photo List</button>
    50 <div id="size"></div> 250 
</div>
<div id="sidebar">
    <ul id="tags">
        <li>Interesting Photos</li>
        <li>Nature</li>
        <li>Cats</li>
        <li>Dogs</li>
        <li>HDR</li>
    </ul>
</div>
<div id="images"></div>

CSS

body {
    cursor: default;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11pt;
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#toolbar {
    background-color: #eee;
    border-bottom: 1px solid #bbb;
    padding: 3px;
    height: 44px;
}
#size {
    width: 8em;
    display: inline-block;
}

#sidebar {
    background-color: #d5dde6;
    position: absolute;
    top: 45px;
    bottom: 0;
    width: 25%;
}
#images {
    background-color: #3f3f3f;
    position: absolute;
    top: 45px;
    width: 75%;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

#tags {
    font-family: Arial, sans-serif;
    font-size: 14pt;
}
#tags li {
    padding-left: 0.6em;
}
#tags .selected {
    background-color: blue;
    color: white;
    text-shadow: 1px 1px 2px #3b4e6e;
    border-top: 1px solid #92a3b1;
    background-image: -moz-linear-gradient(100% 100% 90deg, #7b8eae, #a7b7c5);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a7b7c5), to(#7b8eae));
}

#images div {
    line-height: 140px;
    margin: 5px 2px;
    padding: 5px 4px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    width: 140px;
    opacity: 0;
}
#images img {
    border: 1px outset #666;
    line-height: 140px;
    margin-bottom: auto;
    margin-top: auto;
    max-height: 140px;
    max-width: 140px;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
}

JavaScript

$('#toolbar_add').entwine({
    onclick: function() {
        var tag = prompt('Enter a tag to search Flickr for photos.')
        $('#tags').add(tag)
    }
})
$('#toolbar_remove').entwine({
    onclick: function() {
        $('#tags').remove()
    }
})
$('#tags').entwine({
    add: function(tag) {
        var item = $('<li>' + tag + '</li>')

        this.append(item)
        item.select()
    },
    remove: function() {
        var selected = $('.selected', this)
        var previous = selected.prev()

        selected.remove()
        previous.select()
    }
})
$('#tags > *').entwine({
    select: function() {
        $('#images').empty()
        $('li', this.parent()).removeClass('selected')
        this.addClass('selected')
        $('#images').load($(this).text())
    },
    onclick: function() {
        this.select()
    }
})
$('#images').entwine({
    load: function(tag) {
        var self = this
        var url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tag + '&tagmode=any&format=json&jsoncallback=?'

        $.getJSON(url, function(data) {
            $(data.items).each(function(i, item) {
                self.append($('<div><img src="' + item.media.m + '" /></div>'))
                if (i == 40) return false
            })
            $('#images div').click(function() {
                $('#images div').removeClass('selected')
                $(this).addClass('selected')
            })
        })
    }
})
$('#images div').entwine({
    onmatch: function() {
        $(this).animate({
            opacity: 1
        }, 'normal')
    }
})
$('#size').entwine({
    scale: function(size) {
        $('#images div').css({
            width: size
        })
        $('#images img').css({
            lineHeight: size,
            maxHeight: size,
            maxWidth: size
        })
    }
})

// === Main ===
$(function() {
    $('button').button()
    $('#size').slider({
        min: 50,
        max: 500,
        value: 250,
        slide:...