jQuery blrblrTumblrImage

jQuery_blrblrTumblrImage.js

/*
 * jQuery_blrblrTumblrImage.js
 *
 * Varsion: 0.1.7
 * PublishDate: 2012-03-03 23:30
 * LastUpdate : 2014-08-06 23:28
 * 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 && !config.domain) {
            alert("blrblrTumblr : username or domain is required !");
            return false;
        }

        config = $.extend({
            start: "0",
            num: "10",
            interval: 6000,
            speed: "slow",
            minHeight: "200px"
        }, config);

        var jsonURL,
            jsonParam = "",
            $wraps = $(this),
            interval = config.interval,
            speed = config.speed,
            minHeight = config.minHeight,
            htmlEsc   = function htmlEsc(str) {
                return $('<div />').text( str ).html();
            };

        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;
        delete config.minHeight;

        $(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 $wrap = $(this);

                    $wrap.css("min-height", minHeight).append(
                        $("<a>").css({
                            display: "inline-block",
                            willChange: "height"
                        }).attr(
                            "href", htmlEsc(p.url)
                        ).append(
                            $("<img>").attr("src", htmlEsc(p["photo-url-250"]))
                        ).hide()
                    );

                    $wrap.find("img").load(function(){
                        $wrap.find("a:first-child").slideDown(speed);
                    });
                });
            });

            initSlideShow();
        }

        function initSlideShow() {
            $wraps.each(function () {
                var $wrap = $(this),
                    timer;

                function slideShow() {
                    var a = $wrap.find("a"),
                        f = a.eq(0),
                        s = a.eq(1);
                    f.slideUp(speed, function () {
                        s.slideDown(speed);
                        f.appendTo($wrap);
                    });
                }

                function setTimer() {
                    timer = setInterval(slideShow, interval);
                }

                function clearTimer() {
                    clearInterval(timer);
                }

                $wrap.find("a").hover(clearTimer, setTimer);
                setTimer();
            });
        }

        return this;
    };
})(jQuery);

jQuery_blrblrTumblrImage_min.js

/*
 * jQuery_blrblrTumblrImage.js
 *
 * Varsion: 0.1.7
 * PublishDate: 2012-03-03 23:30
 * LastUpdate : 2014-08-06 23:28
 * Copyright (c) 2012- ethertank.jp
 * Licensed under the MIT
 *
 * jQuery required (tested on 1.7.1)
 *
 */
;(function(a,b){a.fn.blrblrTumblrImage=function(g){if(!g.username&&!g.domain){alert("blrblrTumblr : username or domain is required !");return false}g=a.extend({start:"0",num:"10",interval:6000,speed:"slow",minHeight:"200px"},g);var d,f="",l=a(this),e=g.interval,h=g.speed,k=g.minHeight,c=function c(m){return a("<div />").text(m).html()};d=g.username?"http://"+g.username+".tumblr.com/api/read/json?type=photo":"http://"+g.domain+"/api/read/json?type=photo";delete g.username;delete g.domain;delete g.interval;delete g.speed;delete g.minHeight;a(g).each(function(m){f+=a.param(this)});if(f.length){d+="&"+f}a.ajax({url:d,dataType:"jsonp",timeout:5000}).error(function(m,o,n){wraps.html("<p><small>error</small></p>")}).success(function(m){json=m;i(json)});function i(m){a.each(m.posts,function(n,o){l.each(function(){var p=a(this);p.css("min-height",k).append(a("<a>").css({display:"inline-block",willChange:"height"}).attr("href",c(o.url)).append(a("<img>").attr("src",c(o["photo-url-250"]))).hide());p.find("img").load(function(){p.find("a:first-child").slideDown(h)})})});j()}function j(){l.each(function(){var o=a(this),q;function n(){var r=o.find("a"),u=r.eq(0),t=r.eq(1);u.slideUp(h,function(){t.slideDown(h);u.appendTo(o)})}function m(){q=setInterval(n,e)}function p(){clearInterval(q)}o.find("a").hover(p,m);m()})}return this}})(jQuery);

usage.md

🎨 概要

ウェブサイトに、特定の Tumblr に投稿された画像をスライドショー表示するための jQuery プラグイン。

🎨 DEMO

jQuery blrblrTumblrImage v0.1.6 - jsdo.it

🎨 つかいかた

1️⃣ ライブラリの読込み

head 要素内か body 要素内最下部にて、対応バージョンの jQuery と当スクリプトを読込む。
※「jQuery の URL」及び「予備の jQuery の URL」は適切なものに書き換えて下さい。

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-X.X.X.min.js"></script>
<script>"undefined" == typeof jQuery&&document.write(unescape("%3Cscript src='http://example.com/js/jquery-X.X.X.min.js' %3E%3C/script%3E"));</script>
<script src="http://example.com/jQuery_blrblrTumblrImage_min.js"></script>

2️⃣ 表示要素の記述

body 要素内の任意の位置に表示用エレメントを用意

<div id="tumblrSlideShow"><div>

3️⃣ 実行コードの記述

スクリプト本体読込みコードより後に以下の様なコードを記述

<script>
$(function() {
    $("#tumblrSlideShow").blrblrTumblrImage({
        username : "YourTumblrAccount",
        start : 0,
        num : 10,
        interval : 6000,
        speed : 1200,
        tagged : "illustration"
    });
});
</script>

options

• username : 対象とする Tumblr の アカウント名 (文字列。※domain か username の片方は必須)
• domain : 対象とする Tumblr のドメイン (文字列。※domain か username の片方は必須)
• start : 最新ポストからの取得開始位置 (数値。初期値 : 0)
• num : 取得件数 (数値、初期値 : 10)
• interval : スライドショーの実行間隔 (数値。 初期値 : 6000)
• speed : slideDown / slideUp のスピード (任意の数値か "slow"、"fast"、"normal"。 初期値 : "slow")
• minHeight : 表示領域に最低限確保する高さを指定 (初期値: "200px")
• tagged : 対象タグ (文字列。例えば "guitar" と指定すると "guitar" でタグ付けされた投稿だけ表示される)

注意

domain か username は必須。独自ドメイン運用の場合は domain をオプションとして指定する。
両方指定した場合は username が優先される。