Forked from: ethertank's jQuery huwahuwaTumhuwrImage v0.1.0 View Diff (140)

デバッグ中　huwahuwaTumhuwrImage

ethertank

2014-07-18 05:08:16

License: MIT License

Fork: 1

Fav: 0

View: 1958

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 181 lines
HTML 21 lines
CSS 65 lines

最初の要素をフェードアウトして

二番目の要素をフェードインした後に

「最初の要素をケツに移動」

……というのが無駄なDOM操作っぽくて

「んー？」ってなったので

動作を変えてみるテスト中。

.data() を使って

ラッパーDIVに現在表示中の画像のindexを示すデータ値を設定。

その値を用いてアニメーション対象を決定し、操作。

毎アニメフェーズ終了時にその値を増やす感じに。

コード量は増えたし、

元のとどっちがいいかは分からんけど

とりあえずやりたい事は出来た。

……フツーはどうするモノなんだろう

// buggy!!!! // minHeight.push( p.height * 250 / p.width ); /* p["photo-url-250"] の参照先画像が必ずしも 250px 幅とは限らないのでバグ */ 変えた。

死にたい。

出来た。

あと型チェックとか、num が 1 とかだった場合のあしらいとかやる。

interval: 1000, speed: 2000 みたいに、speed の方がでかいとバグる。

出家したい。

出来たように見えたが別タブ見たりしてウィンドウを非アクティブにするとバグ出る。んごー。

いったん諦めて仕組み戻した。なんだったんだろう。

デバッグ中　huwahuwaTumhuwrImage
jQuery v2.1.0

/*
 * jQuery_huwahuwaTumhuwrImage.js
 *
 * Varsion: 0.0.8+ DEV
 * PublishDate: 2014-07-07 02:55
 * LastUpdate : 20XX-XX-XX XX:XX
 * 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  = Number(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,
            error: function (jqXHR, textStatus, errorThrown) {
                wraps.html("<p><small>error</small></p>");
            },
            success: function (jsonData) {
                parse(jsonData);
            }
        });

$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 startTimer () {
                    timer = setInterval( slideShow, interval + speed * 2 );
                }

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

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

// usage
jQuery(function ($) {
    $("#tumblrImages_1").huwahuwaTumhuwrImage({
        username: "ethertank",
        interval: 200,
        speed: 2000,
        tagged : "抹茶",
        num : 3
    });

$("#tumblrImages_2").huwahuwaTumhuwrImage({
        username: "ethertank",
        interval: 2000,
        speed: 20,
        tagged : "guitar"
    });
});

デバッグ中　huwahuwaTumhuwrImage
html5doctor.com Reset Stylesheet

@import url(http://fonts.googleapis.com/css?family=Economica:700);

html{ overflow-y:scroll; }

body {
    background: #59622C;
    color: ghostwhite;
    font-size: 13px;
    font-family: "segoe ui", "trebuchet ms", arial, helvetica, meiryo, sans-serif;
    line-height: 1.5;
    padding: 20px 0;
}

a:link img,
a:visited img { border: 1px solid #fff; }

a:hover img,
a:focus img { border: 1px solid #fe0; }

h1, h2, h3 {
    font-family: economica, arial, helvetica, meiryo, sans-serif;
}

h1 {
    font-size: 1.75em;
    padding: 45px 0 40px 110px;
    background: url(http://jsrun.it/assets/z/r/c/e/zrceG.png) -21px top no-repeat;
}

.aside > h3,
.article > h2,
.footer > h3 { font-size:1.5em; padding: .75em 0;}

#contents { position:relative }

#main { margin-right: 292px }
#sub{ position:absolute; top:0; right:0; width:252px }

#globalHeader,
#main,
#sub { padding: 0 20px }

@media screen and (max-width: 420px) {
    #main{ margin-right:0 }
    #sub{ position:static; width:auto }
}

@media screen and (min-width: 801px) {
    body { font-size: 15px; }
}

@media screen and (min-width: 1025px) {
    body { font-size: 17px; }
}

@media screen and (min-width: 1281px) {
    body{ font-size:23px; }
    body, h1, h2 {
	font-family:
	    "segoe ui", "trebuchet ms", arial, helvetica,
	    kozgopro-regular, meiryo, sans-serif;
    }
}

最初の要素をフェードアウトして二番目の要素をフェードインした後に「最初の要素をケツに移動」 ……というのが無駄なDOM操作っぽくて「んー？」ってなったので動作を変えてみるテスト中。 ---- .data() を使ってラッパーDIVに現在表示中の画像のindexを示すデータ値を設定。その値を用いてアニメーション対象を決定し、操作。毎アニメフェーズ終了時にその値を増やす感じに。コード量は増えたし、元のとどっちがいいかは分からんけどとりあえずやりたい事は出来た。 ---- ……フツーはどうするモノなんだろう ---- // buggy!!!! // minHeight.push( p.height * 250 / p.width ); /* p["photo-url-250"] の参照先画像が必ずしも 250px 幅とは限らないのでバグ */ 変えた。 ---- 死にたい。 ---- 出来た。 ---- あと型チェックとか、num が 1 とかだった場合のあしらいとかやる。 ---- interval: 1000, speed: 2000 みたいに、speed の方がでかいとバグる。出家したい。 ---- 出来たように見えたが別タブ見たりしてウィンドウを非アクティブにするとバグ出る。んごー。 ---- いったん諦めて仕組み戻した。なんだったんだろう。 /* * jQuery_huwahuwaTumhuwrImage.js * * Varsion: 0.0.8+ DEV * PublishDate: 2014-07-07 02:55 * LastUpdate : 20XX-XX-XX XX:XX * 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 = Number(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, error: function (jqXHR, textStatus, errorThrown) { wraps.html("<p><small>error</small></p>"); }, success: function (jsonData) { parse(jsonData); } }); 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 + speed * 2 ); } $wrap.find("a").not(":first-child").hide(); $wrap.show(); $wrap.find("a").hover(stopTimer, startTimer); setTimeout( startTimer, interval + speed * 2 ); }); } return this; }; // End of $.fn.huwahuwaTumhuwrImage = function (config) {}; })(jQuery); // usage jQuery(function ($) { $("#tumblrImages_1").huwahuwaTumhuwrImage({ username: "ethertank", interval: 200, speed: 2000, tagged : "抹茶", num : 3 }); $("#tumblrImages_2").huwahuwaTumhuwrImage({ username: "ethertank", interval: 2000, speed: 20, tagged : "guitar" }); }); <div id="sub"> <div class="aside unit"> <h3>Green Tea</h3> <div id="tumblrImages_1"></div> </div> <div class="aside unit"> <h3>Guitar</h3> <div id="tumblrImages_2"></div> </div> <div class="footer unit"> <h3>Site Info</h3> <p>auther : hogenyoro</p> <p><small>© hogenyoro.</small></p> </div> </div> @import url(http://fonts.googleapis.com/css?family=Economica:700); html{ overflow-y:scroll; } body { background: #59622C; color: ghostwhite; font-size: 13px; font-family: "segoe ui", "trebuchet ms", arial, helvetica, meiryo, sans-serif; line-height: 1.5; padding: 20px 0; } a:link img, a:visited img { border: 1px solid #fff; } a:hover img, a:focus img { border: 1px solid #fe0; } h1, h2, h3 { font-family: economica, arial, helvetica, meiryo, sans-serif; } h1 { font-size: 1.75em; padding: 45px 0 40px 110px; background: url(http://jsrun.it/assets/z/r/c/e/zrceG.png) -21px top no-repeat; } .aside > h3, .article > h2, .footer > h3 { font-size:1.5em; padding: .75em 0;} #contents { position:relative } #main { margin-right: 292px } #sub{ position:absolute; top:0; right:0; width:252px } #globalHeader, #main, #sub { padding: 0 20px } @media screen and (max-width: 420px) { #main{ margin-right:0 } #sub{ position:static; width:auto } } @media screen and (min-width: 801px) { body { font-size: 15px; } } @media screen and (min-width: 1025px) { body { font-size: 17px; } } @media screen and (min-width: 1281px) { body{ font-size:23px; } body, h1, h2 { font-family: "segoe ui", "trebuchet ms", arial, helvetica, kozgopro-regular, meiryo, sans-serif; } }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

ethertank

prototype を拡張したいお年頃

個人的に今、SVGがアツい（だいぶ遅い）

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/mkGs/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

デバッグ中 (2)　huwahuwaTumhuwrImage

ethertank

0
0
1444

217/27/76
- api
- jquery
- library&test
- plugin
- tumblr

デバッグ中　huwahuwaTumhuwrImage

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked