Forked from: gaina's flicker test diff(36) forked: flicker test gaina Follow 2011-08-24 15:37:00 License: MIT License Fork0 Fav0 View502 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 100 lines HTML 1 lines CSS 29 lines forked: flicker test jQuery v1.6.2 // forked from gaina's "flicker test" http://jsdo.it/gaina/9Zml jQuery(function($){ var st = 'http://api.flickr.com/services/rest/?'; $.ajax({ data : { "api_key" : "4a856f3f5e1e29ef7c8f8664f3533aba", "method" : "flickr.photos.search", "format" : "json", "user_id" : "53873149@N03" }, url : st, dataType : "jsonp", success : function(data,type,xh){ } }); }); var items,count,current,more; var interval; more = 5; function jsonFlickrApi(c){ items = c["photos"]["photo"]; var arr = []; for(var i=0;i < more;i++){ var d = $("div#container"); var img = 'http://farm' + items[i]["farm"] + '.static.flickr.com/' + items[i]["server"] + '/' + items[i]["id"] + '_' + items[i]["secret"]; var image = new Image(); image.src = img + '.jpg'; image.alt = items[i]["title"]; arr.push(image); image.onload = function(){ var a = $('<img src="' + this.src + '" alt="' + this.alt + '" />').css({"opacity":0}); var o = $('<div></div>'); d.append(o); o.append(a); a.attr({"width":a.width(),"height":a.height()}); a.animate({opacity:1,delay:300 * count},500); }; } current = more; $("body").append('<div id="more">more</div>'); $("div#more").bind("click",moreStream); interval = setInterval(scrollStream,500) } function scrollStream(evt){ var t = document.body.scrollTop || document.documentElement.scrollTop; var c = $(window).height(); var s = document.body.scrollHeight; var r = s - c - t; if(r < 50){ moreStream(); } } function moreStream(evt){ var arr = []; for(count = current;count < current + more;count++){ if(count == items.length){ $("div#more").unbind("click",moreStream); $("div#more").css({"cursor":"none","background" : "#FFF","color" : "#000"}); $("div#more").text("end"); clearInterval(interval); break; } var d = $("div#container"); var img = 'http://farm' + items[count]["farm"] + '.static.flickr.com/' + items[count]["server"] + '/' + items[count]["id"] + '_' + items[count]["secret"]; var image = new Image(); image.src = img + '.jpg'; image.alt = items[count]["title"]; arr.push(image); image.onload = function(){ var a = $('<img src="' + this.src + '" alt="' + this.alt + '" />').css({"opacity":0}); var o = $('<div></div>'); d.append(o); o.append(a); a.attr({"width":a.width(),"height":a.height()}); a.animate({opacity:1,delay:300 * count},500); } }; current = count; } <div id="container" class="z"></div> forked: flicker test body {background:#AAA;} div#container div { background:#FFF; border:1px solid #333; float:left; vertical-align:middle; text-align:center; margin:0 10px 10px 0; padding:5px; } div#more { width:100%; font-weight:bold; font-size:14px; color:#FFF; background:#AAA; padding:1em 0; text-align:center; cursor:pointer; margin-top:2em; } .z {width:100%;} .z:after{ content: ""; display: block; clear: both; } // forked from gaina's "flicker test" http://jsdo.it/gaina/9Zml jQuery(function($){ var st = 'http://api.flickr.com/services/rest/?'; $.ajax({ data : { "api_key" : "4a856f3f5e1e29ef7c8f8664f3533aba", "method" : "flickr.photos.search", "format" : "json", "user_id" : "53873149@N03" }, url : st, dataType : "jsonp", success : function(data,type,xh){ } }); }); var items,count,current,more; var interval; more = 5; function jsonFlickrApi(c){ items = c["photos"]["photo"]; var arr = []; for(var i=0;i < more;i++){ var d = $("div#container"); var img = 'http://farm' + items[i]["farm"] + '.static.flickr.com/' + items[i]["server"] + '/' + items[i]["id"] + '_' + items[i]["secret"]; var image = new Image(); image.src = img + '.jpg'; image.alt = items[i]["title"]; arr.push(image); image.onload = function(){ var a = $('<img src="' + this.src + '" alt="' + this.alt + '" />').css({"opacity":0}); var o = $('<div></div>'); d.append(o); o.append(a); a.attr({"width":a.width(),"height":a.height()}); a.animate({opacity:1,delay:300 * count},500); }; } current = more; $("body").append('<div id="more">more</div>'); $("div#more").bind("click",moreStream); interval = setInterval(scrollStream,500) } function scrollStream(evt){ var t = document.body.scrollTop || document.documentElement.scrollTop; var c = $(window).height(); var s = document.body.scrollHeight; var r = s - c - t; if(r < 50){ moreStream(); } } function moreStream(evt){ var arr = []; for(count = current;count < current + more;count++){ if(count == items.length){ $("div#more").unbind("click",moreStream); $("div#more").css({"cursor":"none","background" : "#FFF","color" : "#000"}); $("div#more").text("end"); clearInterval(interval); break; } var d = $("div#container"); var img = 'http://farm' + items[count]["farm"] + '.static.flickr.com/' + items[count]["server"] + '/' + items[count]["id"] + '_' + items[count]["secret"]; var image = new Image(); image.src = img + '.jpg'; image.alt = items[count]["title"]; arr.push(image); image.onload = function(){ var a = $('<img src="' + this.src + '" alt="' + this.alt + '" />').css({"opacity":0}); var o = $('<div></div>'); d.append(o); o.append(a); a.attr({"width":a.width(),"height":a.height()}); a.animate({opacity:1,delay:300 * count},500); } }; current = count; } <div id="container" class="z"></div> body {background:#AAA;} div#container div { background:#FFF; border:1px solid #333; float:left; vertical-align:middle; text-align:center; margin:0 10px 10px 0; padding:5px; } div#more { width:100%; font-weight:bold; font-size:14px; color:#FFF; background:#AAA; padding:1em 0; text-align:center; cursor:pointer; margin-top:2em; } .z {width:100%;} .z:after{ content: ""; display: block; clear: both; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/tiw7/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gaina/tiw7" title="forked: flicker test">forked: flicker test - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter
