josher19 · September 29, 2015 11:28
diff --git a/pic.html b/pic.html
 <!DOCTYPE html> 
 <html> 
 <head> 
 	<title>flickr tag explorer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 </head>
 <body>

 <script>

 function gethash() { return location.hash.replace("#", ""); }

 var cached = {};

 function getImgByTag(tag) {
  if (cached[tag]) { cached.lastTag = tag; showjson(cached[tag]); return; }
  // else { cached[cached.lastTag] = null }
  cached.lastTag = tag;
  jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+tag+"&tagmode=any&format=json&jsoncallback=?", callback)
  document.title = "flickr tag exploring " + tag;
 }

 function showdebug(querystring, results) {
   if (String(querystring).indexOf("debug") != -1 && self.JSON) {
 	    $("#debug").text( JSON.stringify( results ));
 	    return true;
 	} 
 	return false;
 }

 var Tagsoup = location.search.indexOf("verbose") != -1 ? {} : false;

 function callback(results) {
   if ("undefined" == typeof cached[cached.lastTag]) getTagStats(results, Tagsoup);
   if (cached && cached.lastTag) cached[cached.lastTag] = results;
   showjson(results);
   showdebug(location.search, results) || fontify(getTiers(Tagsoup,1));   
 }

 function showjson(results) { 
   var num = randitem(results.items.length);
   displayitem(results,num);
 }

 function displayitem(results,num) {
   var item = results.items[num %= results.items.length];
   var tagimg = showimg(item, [item.title, "::", cached.lastTag || "", num, "of", results.items.length].join(" "));
   $('#results').hide().html($('<h3 id=title />').text(results.title))
                .append('<div class=tags> tags: ' + showitem(item) + '</div>')
 		        .append(tagimg).fadeIn();
   tagimg.click( displayitem.nextimg = function nextimg() {
 	   displayitem(results, num + 1);
   });
 }


 function randitem(maximum) {
 	return Math.floor(maximum * Math.random());
 }

 function showimg(item, title) {
 	return jQuery('<img />').attr({'class': 'flickImg', 'src': item.media.m, 'alt': item.title, 'title': title || item.title});
 }

 function makeLinks(tags) {
 	return jQuery.map(tags, function(item,index) { return item.link('#' + item) })
 }

 function showitem(item)
 {	
 	var showtags = "(no tags)", tags=item.tags.split(" ");
 	var linkage = makeLinks(tags); // jQuery.map(tags, function(item,index) { return item.link('#' + item) })
 	if (linkage.length > 1) {
 		var last = linkage.length - 1;
 		linkage[last]="and "+linkage[last];
 		showtags = linkage.join(", ");
 	} else {
 		showtags = linkage[0] || showtags || "(none)";
 	}
 	return showtags;
 }

 var findByText = function(ev) { getImgByTag(this.text); }

 function getRandomTag() {
 	var tags=$('div.tags a'); 
 	return tags.eq( randitem(tags.length) ).click().text();
 }

 function freeCache() {
 	cached[cached.lastTag] = null;
 	// if (self.Tagsoup) fontify(getTiers(Tagsoup, 1));
 }

 function getNextImage() {
 	if (!randitem(12)) { /** 1/12 chance to click a tag rather than next image. */
 		freeCache();
 		return getRandomTag();
 	} else {
 		displayitem.nextimg();
 		return $('img.flickImg').attr('title');
 	}
 }

 function getTagStats(recent, cc) {
 	recent = recent || cached[cached.lastTag];
 	cc = cc || {}; 
 	
 	var alltags=$.map(recent.items, function(item) { return item.tags.split(" "); }).sort();
 	$.each(alltags, function(ndx,item) {cc[item] = 1 + (cc[item]||0); });
 	return [alltags.length, cc];
 }

 function getTiers(taglist, mintagged, maxlen) {
 	if (!taglist) taglist = getTagStats()[1];
 	if (null == mintagged) mintagged = 0;
 	
 	var res=[]; for (var tag in taglist) { if(taglist[tag]>mintagged) res.push([taglist[tag], tag]); }; 
 	if (res.sort) res.sort(function(a,b) { return a[0] - b[0]}).reverse();
 	if (maxlen && res.length > maxlen) res.length=maxlen;
 	var dd={}; $.each(res, function(key,item) { dd[item[0]]=(dd[item[0]] || []).concat(item[1]) }); 
 	return dd;
 }


 function fontify(gt) {
 	$("#debug").html("");
    for (var n in gt) {
        if (n > 0) {
            var items = gt[n];
            var em = Math.round(10 * Math.sqrt(n)) / 20 ; // 0.50em smallest
            $("#debug").append($("<span class=tagcloud />").css("fontSize", em + "em").html(makeLinks(items).join(" ") + " "));
        }
    }
 }

 jQuery(function($) { 
 	var tid;
 	getImgByTag(gethash() || 'cat'); 
 	$('a').on('click', findByText); 
 	var playbtn=$('span#play');
 	playbtn.click(function() { if (null == tid) { playbtn.fadeOut(); tid = setInterval(getNextImage, 15000); } getNextImage(); return false; });
 	$('span#stop').click(function() { if (null != tid) clearInterval(tid); playbtn.fadeIn(); tid=null; return false; });
 });

 </script>

 <span id=stop title="stop image rotation">[x]</span> <span id=play title="new image every 15 seconds">&rarr;</span>
 <div id=results></div>

 <div id=debug style="width: 80%"></div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>flickr tag explorer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>
	<body>

	<script>

	function gethash() { return location.hash.replace("#", ""); }

	var cached = {};

	function getImgByTag(tag) {
	if (cached[tag]) { cached.lastTag = tag; showjson(cached[tag]); return; }
	// else { cached[cached.lastTag] = null }
	cached.lastTag = tag;
	jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+tag+"&tagmode=any&format=json&jsoncallback=?", callback)
	document.title = "flickr tag exploring " + tag;
	}

	function showdebug(querystring, results) {
	if (String(querystring).indexOf("debug") != -1 && self.JSON) {
	$("#debug").text( JSON.stringify( results ));
	return true;
	}
	return false;
	}

	var Tagsoup = location.search.indexOf("verbose") != -1 ? {} : false;

	function callback(results) {
	if ("undefined" == typeof cached[cached.lastTag]) getTagStats(results, Tagsoup);
	if (cached && cached.lastTag) cached[cached.lastTag] = results;
	showjson(results);
	showdebug(location.search, results) \|\| fontify(getTiers(Tagsoup,1));
	}

	function showjson(results) {
	var num = randitem(results.items.length);
	displayitem(results,num);
	}

	function displayitem(results,num) {
	var item = results.items[num %= results.items.length];
	var tagimg = showimg(item, [item.title, "::", cached.lastTag \|\| "", num, "of", results.items.length].join(" "));
	$('#results').hide().html($('<h3 id=title />').text(results.title))
	.append('<div class=tags> tags: ' + showitem(item) + '</div>')
	.append(tagimg).fadeIn();
	tagimg.click( displayitem.nextimg = function nextimg() {
	displayitem(results, num + 1);
	});
	}


	function randitem(maximum) {
	return Math.floor(maximum * Math.random());
	}

	function showimg(item, title) {
	return jQuery('<img />').attr({'class': 'flickImg', 'src': item.media.m, 'alt': item.title, 'title': title \|\| item.title});
	}

	function makeLinks(tags) {
	return jQuery.map(tags, function(item,index) { return item.link('#' + item) })
	}

	function showitem(item)
	{
	var showtags = "(no tags)", tags=item.tags.split(" ");
	var linkage = makeLinks(tags); // jQuery.map(tags, function(item,index) { return item.link('#' + item) })
	if (linkage.length > 1) {
	var last = linkage.length - 1;
	linkage[last]="and "+linkage[last];
	showtags = linkage.join(", ");
	} else {
	showtags = linkage[0] \|\| showtags \|\| "(none)";
	}
	return showtags;
	}

	var findByText = function(ev) { getImgByTag(this.text); }

	function getRandomTag() {
	var tags=$('div.tags a');
	return tags.eq( randitem(tags.length) ).click().text();
	}

	function freeCache() {
	cached[cached.lastTag] = null;
	// if (self.Tagsoup) fontify(getTiers(Tagsoup, 1));
	}

	function getNextImage() {
	if (!randitem(12)) { /** 1/12 chance to click a tag rather than next image. */
	freeCache();
	return getRandomTag();
	} else {
	displayitem.nextimg();
	return $('img.flickImg').attr('title');
	}
	}

	function getTagStats(recent, cc) {
	recent = recent \|\| cached[cached.lastTag];
	cc = cc \|\| {};

	var alltags=$.map(recent.items, function(item) { return item.tags.split(" "); }).sort();
	$.each(alltags, function(ndx,item) {cc[item] = 1 + (cc[item]\|\|0); });
	return [alltags.length, cc];
	}

	function getTiers(taglist, mintagged, maxlen) {
	if (!taglist) taglist = getTagStats()[1];
	if (null == mintagged) mintagged = 0;

	var res=[]; for (var tag in taglist) { if(taglist[tag]>mintagged) res.push([taglist[tag], tag]); };
	if (res.sort) res.sort(function(a,b) { return a[0] - b[0]}).reverse();
	if (maxlen && res.length > maxlen) res.length=maxlen;
	var dd={}; $.each(res, function(key,item) { dd[item[0]]=(dd[item[0]] \|\| []).concat(item[1]) });
	return dd;
	}


	function fontify(gt) {
	$("#debug").html("");
	for (var n in gt) {
	if (n > 0) {
	var items = gt[n];
	var em = Math.round(10 * Math.sqrt(n)) / 20 ; // 0.50em smallest
	$("#debug").append($("<span class=tagcloud />").css("fontSize", em + "em").html(makeLinks(items).join(" ") + " "));
	}
	}
	}

	jQuery(function($) {
	var tid;
	getImgByTag(gethash() \|\| 'cat');
	$('a').on('click', findByText);
	var playbtn=$('span#play');
	playbtn.click(function() { if (null == tid) { playbtn.fadeOut(); tid = setInterval(getNextImage, 15000); } getNextImage(); return false; });
	$('span#stop').click(function() { if (null != tid) clearInterval(tid); playbtn.fadeIn(); tid=null; return false; });
	});

	</script>

	<span id=stop title="stop image rotation">[x]</span> <span id=play title="new image every 15 seconds">→</span>
	<div id=results></div>

	<div id=debug style="width: 80%"></div>

	</body>
	</html>