Forked from: Event's Simple MediaRSS Viewer diff(189) 連想式イメージギャラリー forked from: Simple MediaRSS Viewer GeckoTang Follow 2010-08-23 19:30:17 License: MIT License Fork0 Fav0 View1007 連想式イメージギャラリー 画像をクリック! Play Stop Reload Fullscreen Smart Phone Readme JavaScript 95 lines HTML 7 lines CSS 114 lines 連想式イメージギャラリー 画像をクリック! 連想式イメージギャラリー forked from: Simple MediaRSS Viewer // forked from Event's "Simple MediaRSS Viewer" http://jsdo.it/Event/simple-mediarss-viewer // 連想式イメージギャラリー // 画像をクリック! google.load("feeds", "1"); google.load("jquery","1.4"); google.setOnLoadCallback(initialize); var keyword,thubm_class,tag,title; var ulCount = 0; function initialize() { loadLib(); loadImg('kamakura'); $("h3",'#media_rss').live('click',function(){ $.scrollTo('#keyword',500,{offset: {top:-5}}); }); $("strong","#keyword").live('click',function(){ $.scrollTo('#photoList_'+$(this).attr('id').split('_')[1],500,{offset: {top:-20}}); }); } function loadImg(kw){ $.scrollTo('h1',500,{offset: {top:-5}}); keyword = kw; $('#keyword').append('<strong id="key_'+ulCount+'">'+kw+'</strong>'); $('#loading').show(); var feed = new google.feeds.Feed("http://api.flickr.com/services/feeds/photos_public.gne?tags="+encodeURIComponent(kw)+"&format=rss_200"); var MediaRSS = "http://search.yahoo.com/mrss/"; var thumbs = []; feed.setNumEntries(30); feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT); feed.load(function(result) { if (!result.error){ var entries = result.feed.entries; for (var i = 0; i < entries.length; i++) { var cateNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "category"); var thumbNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "thumbnail"); if (thumbNodes.length === 0) continue; var thumbNode = thumbNodes[0]; var thumbURL = thumbNode.getAttribute("url"); if (thumbURL){ var tag = $(cateNodes[0]).text(); tag = tag.replace(keyword,''); thumbs.push([thumbURL,tag]); } } $('#loading').hide(); onImageLoaded(thumbs); } }); } function onImageLoaded(images) { var htmls = []; htmls.push('<h3>'+keyword+'</h3>'); htmls.push('<ul id="photoList_'+ulCount+'" class="photoList">'); $.each( images, function(i,array) { htmls.push('<li class="thumb_list" id="thumb_list_'+i+'" data="'+array[1]+'">'); if(array[1] != ''){ htmls.push(' <img class="more thumb" alt="'+array[1]+'" src="'+array[0]+'" />'); }else{ htmls.push(' <img class="thumb" alt="'+array[1]+'" src="'+array[0]+'" />'); } htmls.push('</li>'); }); $("#media_rss").prepend(htmls.join('')); $('#photoList_'+ulCount+' li').live('click',function(){ var $img = $(this).children('.thumb.more'); if($img.length){ var myalt = $img.attr('alt'); myalt = $.grep( myalt.split(' '), function(n){return n !== '';} ); var reKey = myalt[Math.floor(Math.random()*(myalt.length-1))]; loadImg(reKey); } }); ulCount++; } function loadLib(){ /** * jQuery.ScrollTo - Easy element scrolling using jQuery. * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 5/25/2009 * @author Ariel Flesler * @version 1.4.2 * * http://flesler.blogspot.com/2007/10/jqueryscrollto.html */ (function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery); }; // <h1>連想式イメージギャラリーβ版</h1> <p>クリックするとタグを元に画像を取りにいきます。<br/>mediaRSSとか気にしてなかったので改修!</p> <script src="http://www.google.com/jsapi?key=ABQIAAAAv7CFgLxkvXPvX2wsDe8U7RTgesIKiW70LgsG7i-NXW8R52TaOBR8U55UVRx4tOOPzns9Z3etYprOww" type="text/javascript"></script> <div id="loading">loading...</div> <div id="keyword"></div> <div id="media_rss"></div> 連想式イメージギャラリー forked from: Simple MediaRSS Viewer * {margin:0;padding:0;} body{ background:#eee; } p{ font-size:12px; padding:10px 0; } #keyword{ padding:10px 5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; line-height:1.5; background:#fff; font-size:10px; } #keyword strong:before{ content:'->'; padding:0 2px; font-weight:normal; border-bottom:1px solid #fff; } #keyword strong{ border-bottom:1px dashed #ccc; cursor:pointer; } #keyword strong:hover{ border-color:#000; } h3{ font-weight:bold; cursor:pointer; border-bottom:1px dashed #000; padding:5px 0; margin:10px 0 5px; } h3:after{ font-weight:normal; content:"▲top"; font-size:10px; padding-left:10px; } h3:hover:after{ color:#ccc; } ul li {display:inline-block;} .thumb{ display:block; width: 75px; height: 75px; -moz-opacity:0.3; opacity:0.3; filter:alpha(opacity=30); cursor:default; } .thumb.more{ width: 75px; height: 75px; -moz-opacity:1; opacity:1; filter:alpha(opacity=100); cursor:pointer; } .photoList { padding: 5px; } .photoList li{ position:relative; z-index:999; border:1px solid #fff; margin-right:5px; margin-bottom:2px; cursor:pointer; } .photoList li:before{ content:''; position:absolute; width:77px; height:77px; top:-2px; left:-2px; border:1px solid #666; } .photoList li:hover:after{ content:attr(data); display:block; position:absolute; top:0; left:0; width: 65px; height: 65px; z-index:3; overflow: hidden; padding:5px; font-size:10px; background:#000; color: #fff; -moz-opacity:0.7; opacity:0.7; filter:alpha(opacity=70); } #loading{ margin:5px 0; padding:5px 0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#000; color:#fff; text-align: center; } 連想式イメージギャラリー 画像をクリック! // forked from Event's "Simple MediaRSS Viewer" http://jsdo.it/Event/simple-mediarss-viewer // 連想式イメージギャラリー // 画像をクリック! google.load("feeds", "1"); google.load("jquery","1.4"); google.setOnLoadCallback(initialize); var keyword,thubm_class,tag,title; var ulCount = 0; function initialize() { loadLib(); loadImg('kamakura'); $("h3",'#media_rss').live('click',function(){ $.scrollTo('#keyword',500,{offset: {top:-5}}); }); $("strong","#keyword").live('click',function(){ $.scrollTo('#photoList_'+$(this).attr('id').split('_')[1],500,{offset: {top:-20}}); }); } function loadImg(kw){ $.scrollTo('h1',500,{offset: {top:-5}}); keyword = kw; $('#keyword').append('<strong id="key_'+ulCount+'">'+kw+'</strong>'); $('#loading').show(); var feed = new google.feeds.Feed("http://api.flickr.com/services/feeds/photos_public.gne?tags="+encodeURIComponent(kw)+"&format=rss_200"); var MediaRSS = "http://search.yahoo.com/mrss/"; var thumbs = []; feed.setNumEntries(30); feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT); feed.load(function(result) { if (!result.error){ var entries = result.feed.entries; for (var i = 0; i < entries.length; i++) { var cateNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "category"); var thumbNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "thumbnail"); if (thumbNodes.length === 0) continue; var thumbNode = thumbNodes[0]; var thumbURL = thumbNode.getAttribute("url"); if (thumbURL){ var tag = $(cateNodes[0]).text(); tag = tag.replace(keyword,''); thumbs.push([thumbURL,tag]); } } $('#loading').hide(); onImageLoaded(thumbs); } }); } function onImageLoaded(images) { var htmls = []; htmls.push('<h3>'+keyword+'</h3>'); htmls.push('<ul id="photoList_'+ulCount+'" class="photoList">'); $.each( images, function(i,array) { htmls.push('<li class="thumb_list" id="thumb_list_'+i+'" data="'+array[1]+'">'); if(array[1] != ''){ htmls.push(' <img class="more thumb" alt="'+array[1]+'" src="'+array[0]+'" />'); }else{ htmls.push(' <img class="thumb" alt="'+array[1]+'" src="'+array[0]+'" />'); } htmls.push('</li>'); }); $("#media_rss").prepend(htmls.join('')); $('#photoList_'+ulCount+' li').live('click',function(){ var $img = $(this).children('.thumb.more'); if($img.length){ var myalt = $img.attr('alt'); myalt = $.grep( myalt.split(' '), function(n){return n !== '';} ); var reKey = myalt[Math.floor(Math.random()*(myalt.length-1))]; loadImg(reKey); } }); ulCount++; } function loadLib(){ /** * jQuery.ScrollTo - Easy element scrolling using jQuery. * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 5/25/2009 * @author Ariel Flesler * @version 1.4.2 * * http://flesler.blogspot.com/2007/10/jqueryscrollto.html */ (function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery); }; // <h1>連想式イメージギャラリーβ版</h1> <p>クリックするとタグを元に画像を取りにいきます。<br/>mediaRSSとか気にしてなかったので改修!</p> <script src="http://www.google.com/jsapi?key=ABQIAAAAv7CFgLxkvXPvX2wsDe8U7RTgesIKiW70LgsG7i-NXW8R52TaOBR8U55UVRx4tOOPzns9Z3etYprOww" type="text/javascript"></script> <div id="loading">loading...</div> <div id="keyword"></div> <div id="media_rss"></div> * {margin:0;padding:0;} body{ background:#eee; } p{ font-size:12px; padding:10px 0; } #keyword{ padding:10px 5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; line-height:1.5; background:#fff; font-size:10px; } #keyword strong:before{ content:'->'; padding:0 2px; font-weight:normal; border-bottom:1px solid #fff; } #keyword strong{ border-bottom:1px dashed #ccc; cursor:pointer; } #keyword strong:hover{ border-color:#000; } h3{ font-weight:bold; cursor:pointer; border-bottom:1px dashed #000; padding:5px 0; margin:10px 0 5px; } h3:after{ font-weight:normal; content:"▲top"; font-size:10px; padding-left:10px; } h3:hover:after{ color:#ccc; } ul li {display:inline-block;} .thumb{ display:block; width: 75px; height: 75px; -moz-opacity:0.3; opacity:0.3; filter:alpha(opacity=30); cursor:default; } .thumb.more{ width: 75px; height: 75px; -moz-opacity:1; opacity:1; filter:alpha(opacity=100); cursor:pointer; } .photoList { padding: 5px; } .photoList li{ position:relative; z-index:999; border:1px solid #fff; margin-right:5px; margin-bottom:2px; cursor:pointer; } .photoList li:before{ content:''; position:absolute; width:77px; height:77px; top:-2px; left:-2px; border:1px solid #666; } .photoList li:hover:after{ content:attr(data); display:block; position:absolute; top:0; left:0; width: 65px; height: 65px; z-index:3; overflow: hidden; padding:5px; font-size:10px; background:#000; color: #fff; -moz-opacity:0.7; opacity:0.7; filter:alpha(opacity=70); } #loading{ margin:5px 0; padding:5px 0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#000; color:#fff; text-align: center; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/194A/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/GeckoTang/194A" title="連想式イメージギャラリー forked from: Simple MediaRSS Viewer">連想式イメージギャラリー forked from: Simple MediaRSS Viewer - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter