Forked from: Event's Simple MediaRSS Viewer diff(189)

連想式イメージギャラリー forked from: Simple MediaRSS Viewer

GeckoTang

2010-08-23 19:30:17

License: MIT License

Fork: 0

Fav: 0

View: 1007

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++;
}

連想式イメージギャラリー 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; }

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