jQuery TumblrMosaic

jQuery_TumblrMosaic.js

/*
 * jQuery_TumblrMosaic.js
 *
 * Varsion: 0.0.4
 * PublishDate: 2012-03-11 18:18
 * LastUpdate : 2012-04-06 19:21
 * Copyright (c) 2012 ethertank.jp
 * Licensed under the MIT
 *
 * jQuery required (tested on 1.7.1)
 *
 */

(function ($, undefined) {
    $.fn.blrblrTumblrImage = function (config) {
        if (!config.username) {
            alert("blrblrTumblr : username or domain is required !");
            return false;
        }
        config = $.extend({
            start: "0",
            num: "10"
        }, config);

        var jsonp,
            jsonURL,
            jsonParam = "",
            wraps = $(this),
            interval = config.interval,
            speed = config.speed,
            htmlEsc = (function (map) {
                var replaceStr = function (s) { return map[s]; };
                return function (str) { return str.replace(/<|>|&|'|"/g, replaceStr); };
            })({"<": "&lt;", ">": "&gt;", "&": "&amp;", "'": "&apos;", '"': "&quot;"});

        jsonURL = (config.username) ?
            "http:\/\/" + config.username + ".tumblr.com\/api\/read\/json?type=photo":
            "http:\/\/" + config.domain + "/api\/read\/json?type=photo";

        delete config.username;
        delete config.domain;
        delete config.interval;
        delete config.speed;

        $(config).each(function (i) {
            jsonParam += $.param(this);
        });

        if (jsonParam.length) {
            jsonURL += "&" + jsonParam;
        }

        $.ajax({
            url: jsonURL,
            dataType: 'jsonp',
            timeout: 5000,
            error: function (jqXHR, textStatus, errorThrown) {
                wraps.html("<p><small>error</small></p>");
            },
            success: function (jsonData) {
                json = jsonData;
                parse(json);
            }
        });

        function parse(j) {
            $.each(j["posts"], function (i, p) {
                wraps.each(function () {
                    var $this = $(this);
                    $this.append(
                        $("<a>").hide().attr("href", htmlEsc(p["url"])).append(
                            $("<img>").css("vertical-align","bottom").attr("src", htmlEsc(p["photo-url-75"]))
                        )
                    );

                    $this.find("img").load(function(){
                        $(this).parent().fadeIn();
                    });
                });
            });
        }

        return this;
    };
})(jQuery);

usage

## 表示用エレメントを用意 ##
<div class="tumblrMosaic"></div>


## 実行 ##
$(function () {
    $(".tumblrImages").blrblrTumblrImage({
        username: "ethertank",
        start: 0,
        num: 50
    });
});


## スタイルの一例 ##
.tumblrImages a {
    display: inline-block;
    margin: 0 3px 3px 0;
    opacity: 0.6758;
    -webkit-transition: opacity 0.13s linear;
       -moz-transition: opacity 0.13s linear;
        -ms-transition: opacity 0.13s linear;
         -o-transition: opacity 0.13s linear;
            transition: opacity 0.13s linear;
}
.tumblrImages a:hover,
.tumblrImages a:focus { opacity: 1 }