jFlickrSet

by mmarcon

HTML

<section id="gallery">
    
</section>

CSS

body {
    background-color: #fff;
}

#gallery {
    width: 500px;
    height: 375px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    padding: 10px;
    background-color: #000;
    border-radius: 2px;
    box-shadow: 0 0 20px #999;
}

img.jfs {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
}

span.title-jfs {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: block;
    font-size: 32px;
    color: #fff;
    font-family: helvetica, arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 0 10px;
    width: 480px;
    text-align: right;
}

JavaScript

(function($) {
    var jfsEventNames = {},
        settings = {
            set: null
        },
        conf = {
            photoListYQL: "select * from flickr.photosets.photos where photoset_id='{PHOTOSET_ID}'",
            photoInfoYQL: "select source from flickr.photos.sizes where photo_id='{PHOTO_ID}'",
            format: 'json',
            diagnostics: 'true',
            callback: '',
            baseURL: 'http://query.yahooapis.com/v1/public/yql',
            baseClass: 'jfs'
        },
        cache = {},
        loadNext = function() {
            var photoInfoYQL, photo = cache.photos[cache.photoIndex++],
                data, that = this;
            photoInfoYQL = conf.photoInfoYQL.replace('{PHOTO_ID}', photo.id);
            data = {
                q: photoInfoYQL,
                diagnostics: conf.diagnostics,
                format: conf.format,
                callback: conf.callback
            };
            $.ajax({
                url: conf.baseURL,
                dataType: 'json',
                data: data,
                success: function(response) {
                    console.log(response.query.results.size);
                    var p = response.query.results.size[3].source;
                    /*
                    $.each(response.query.results.size, function(){
                        console.log(this.source)
                        if (this.source.indexOf('_o') !== -1) {
                            p = this.source;
                            return false;
                        }
                    });
                    */
                    $(that).prepend('<span class="title-jfs">'+photo.title+'</span>');
                    $(that).prepend($('<img/>').addClass(conf.baseClass).attr('src', p).attr('title', photo.title));
                    if (cache.photoIndex < cache.photos.length) {
                        setTimeout(function(){
                            loadNext.apply(that);
                        }, 800);
       ...