Test YQL

by mmarcon

HTML

<div id="console">
    
</div>

<ul>
    
</ul>

CSS

body {
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}
#console {
    font-size: 12px;
    font-family: monospace;
    color: #666;
    overflow: auto;
    width: 90%;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 0 0 10px #666;
    margin: 10px auto;
    border-radius: 2px;
    display: none;
}

ul {
    list-style-type: none;
    width: 675px;
    margin: 30px auto 0 auto;
    overflow: hidden;
    border-width: 20px 5px 5px 5px;
    border-style: solid;
    border-color #333;
    border-radius: 2px;
    box-shadow: 0 0 10px #000;
    background-color: #000;
}

li {
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    width: 75px;
    height: 75px;
}

img {
    margin: 0;
    border: 0;
}

JavaScript

$(function() {

    var log = function(message) {
        $('#console').append($('<p/>').text(message));
    };

    var find_original_photo_url = function(urlsObj) {
        var rURL;
        $.each(urlsObj.query.results.size, function(i, size) {
            if (size.source.indexOf('_o.') > -1) {
                rURL = size.source;
                return false;
            }
        });
        return rURL;
    };

    var URLCreator = URLCreator || {};
    URLCreator.baseURL = 'http://query.yahooapis.com/v1/public/yql?callback=?&format=json&q=';
    URLCreator.public_photos = function(user, page, number) {
        page = page || 0;
        var yql = "SELECT * FROM flickr.people.publicphotos(" + page + "," + number + ") WHERE user_id='" + user + "' AND extras='url_sq'";
        var qs = encodeURIComponent(yql);
        return URLCreator.baseURL + qs;
    };
    URLCreator.photo_urls = function(photoID) {
        var yql = "select source from flickr.photos.sizes where photo_id='" + photoID + "'";
        var qs = encodeURIComponent(yql);
        return URLCreator.baseURL + qs;
    };

    log('Starting...');

    var flickrUserID = '98615986@N00';
    $('.flickr_thumbnail').live('click', function() {
        var me = $(this);
        $.getJSON(URLCreator.photo_urls($(this).data('_ID')), function(data) {
            $('.flickr_thumbnail').fadeTo(0, 1);
            me.fadeTo (100, 0.4);
            var url = find_original_photo_url(data);
            log(url);
            $('body').css('background-image', 'url(' + url + ')');
        });
    });
    var random = Math.floor(Math.random() * 100);
    $.getJSON(URLCreator.public_photos(flickrUserID, random, 18), function(data) {
        $.each(data.query.results.photo, function(i, item) {
            var $li = $('<li/>').append($('<a href="#" class="flickr_thumbnail"></a>').append($('<img/>').attr('src', item.url_sq)).data('_ID', item.id));
            $('ul').append($li);
        });
       ...