jQuery_huwahuwaTumhuwrImage.js

jQuery_huwahuwaTumhuwrImage.js

/*
 * jQuery_huwahuwaTumhuwrImage.js
 *
 * Varsion: 0.1.0
 * PublishDate: 2014-07-07 02:55
 * LastUpdate : 2014-07-30 23:45
 * Copyright (c) 2014 ethertank.jp
 * Licensed under the MIT
 *
 * jQuery required (tested on 1.8.3)
 *
 */
(function ($, undefined) {
    $.fn.huwahuwaTumhuwrImage = function (config) {
        if(
            (config === undefined) ||
            ((config.username === undefined) && (config.domain === undefined))
        ) {
            alert("huwahuwaTumhuwrImage: 'username' or 'domain' required.");
            return false;
        }

        config = $.extend({
            start: "0",
            num: "10",
            interval: "6000",
            speed: "slow"
        }, config);
         
        var jsonURL,
            jsonParam = "",
            $wraps    = $(this),
            interval  = config.interval,
            speed     = config.speed,
            htmlEsc   = function htmlEsc(str) {
                return $('<div />').text( str ).html();
            },
            getNaturalHeight = (function() {
                var img = document.createElement("img");

                if ("naturalHeight" in img) {
                    return function (imgElm) {
                        return imgElm.naturalHeight;
                    };
                } else {
                    return function getNaturalHeight (imgElm) {          
                        var img = new Image();
                        img.src = imgElm.src;
                        return img.height;
                    };
                }
            })();
 
        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
        }).success(function (jsonData) {
            parse(jsonData);
        }).error(function (jqXHR, textStatus, errorThrown) {
            wraps.html("<p><small>error</small></p>");
        });

        function parse (j) {
            $.each(j.posts, function (i, p) {
                $wraps.each(function () {
                    var $wrap = $(this);
                    var wrapHeight = 0;
                    
                    $wrap.hide().append(
                        $("<a>").attr({
                            href: htmlEsc(p.url)
                        }).css({
                            display: "inline-block",
                            willChange: "opacity"
                        }).append(
                            $("<img>").attr({
                                src: htmlEsc( p["photo-url-250"] )
                            })
                        )
                    );

                    $wrap.find("img").on("load", function() {
                        $(this).each(function () {
                            var $anchor = $(this).parent(),
                                anchorHeight = $anchor.outerHeight();
                            
                            if(anchorHeight > wrapHeight) {
                                wrapHeight = anchorHeight;                                
                            }
                            
                            $wrap.css( "height", wrapHeight + "px" );
                        });
                    });
                });// End of $wrap.each()
            }); // End of $.each()

            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.fadeOut(speed, function () {
                        $wrap.append(f);
                        s.fadeIn(speed);
                    });
                }
                
                function stopTimer () {
                    clearInterval( timer );
                }

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

                $wrap.find("a").not(":first-child").hide();
                $wrap.show();
                $wrap.find("a").hover(stopTimer, startTimer);

                setTimeout( startTimer, interval );
            });
        }
 
        return this;
    }; // End of $.fn.huwahuwaTumhuwrImage = function (config) {};
})(jQuery);

jQuery_huwahuwaTumhuwrImage_min.js

/*
 * jQuery_huwahuwaTumhuwrImage.js
 *
 * Varsion: 0.1.0
 * PublishDate: 2014-07-07 02:55
 * LastUpdate : 2014-07-30 23:45
 * Copyright (c) 2014 ethertank.jp
 * Licensed under the MIT
 *
 * jQuery required (tested on 1.8.3)
 *
 */
;(function(a,b){a.fn.huwahuwaTumhuwrImage=function(g){if((g===b)||((g.username===b)&&(g.domain===b))){alert("huwahuwaTumhuwrImage: 'username' or 'domain' required.");return false}g=a.extend({start:"0",num:"10",interval:"6000",speed:"slow"},g);var d,f="",l=a(this),e=g.interval,h=g.speed,c=function c(m){return a("<div />").text(m).html()},i=(function(){var n=document.createElement("img");if("naturalHeight" in n){return function(o){return o.naturalHeight}}else{return function m(p){var o=new Image();o.src=p.src;return o.height}}})();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;a(g).each(function(m){f+=a.param(this)});if(f.length){d+="&"+f}a.ajax({url:d,dataType:"jsonp",timeout:5000}).success(function(m){j(m)}).error(function(m,o,n){wraps.html("<p><small>error</small></p>")});function j(m){a.each(m.posts,function(n,o){l.each(function(){var q=a(this);var p=0;q.hide().append(a("<a>").attr({href:c(o.url)}).css({display:"inline-block",willChange:"opacity"}).append(a("<img>").attr({src:c(o["photo-url-250"])})));q.find("img").on("load",function(){a(this).each(function(){var r=a(this).parent(),s=r.outerHeight();if(s>p){p=s}q.css("height",p+"px")})})})});k()}function k(){l.each(function(){var n=a(this),q;function m(){var r=n.find("a"),u=r.eq(0),t=r.eq(1);u.fadeOut(h,function(){n.append(u);t.fadeIn(h)})}function p(){clearInterval(q)}function o(){q=setInterval(m,e)}n.find("a").not(":first-child").hide();n.show();n.find("a").hover(p,o);setTimeout(o,e)})}return this}})(jQuery);

usage.md

🎨 概要

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

🎨 DEMO

jQuery huwahuwaTumhuwrImage - 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_huwahuwaTumhuwrImage_min.js"></script>

2️⃣ 表示要素の記述

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

<div id="tumblrSlideShow"><div>

3️⃣ 実行コードの記述

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

<script>
$(function() {
    $("#tumblrSlideShow").huwahuwaTumhuwrImage({
        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")
• tagged : 対象タグ (文字列。例えば "guitar" と指定すると "guitar" でタグ付けされた投稿だけ表示される)

注意

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