planetoftheweb/DisplayFlickrFeedWTags

## DisplayFlickrFeedWTags
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Show flickr stream with tags</title>
 <!-- include jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!-- Minimalist StyleSheet -->
  <style>
   .group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
   .group:after { clear: both; }
   .group { zoom: 1; }

   body, #showphoto img {
    margin: 0;
    background: black;
    width: 100%;
   }

   #showphoto, #photolist {
    float: left;
   }
   #showphoto {
    width: 75%;
    color: white;
   }

   #photolist, #photolist img {
    width: 25%;
    display: block;
    float:  left;
   }
  </style>

<!-- Functions -->
<script type="text/javascript">
 function jsonFlickrFeed(data) {
  var output = ''; //set up an output variable

  //Loop through the items in the array
  for (var i=0; i<data.items.length; i++) {
    var title = data.items[i].title; // get the title
    var photoLink = data.items[i].media.m.substring(0,56); //get just the photoID, getting rid of the link

    //prepare output
   output +='<a href="#showphoto" data-transition="fade" onclick="showPhoto(\'' + photoLink + '\',\'' + title + '\')">';
   output += '<img src="' + photoLink + '_q.jpg" alt="Photo: '+ title + '">';
   output += '</a>';
   } // go through each piece of JSON data
  $('#photolist').html(output); //send the output to the photolist ID
 } // jsonFlickrFeed


 //display the photo
 function showPhoto(photoLink, title) {
  var output = '<h3>' + title + '<h3>';
  output += '<img src="' + photoLink + '_b.jpg" alt="Photo: '+ title + '">';
  $('#showphoto').html(output);
  output = '</a>';
 }
</script>
</head>
<body>
 <div id="photolist"></div>
 <div id="showphoto"></div>

 <!-- This will call the Flickr API -->
 <script src="http://api.flickr.com/services/feeds/photos_public.gne?id=73845487@N00&amp;format=json&amp;extras=description;&amp;tags=viewsource"></script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Show flickr stream with tags</title>
	<!-- include jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<!-- Minimalist StyleSheet -->
	<style>
	.group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
	.group:after { clear: both; }
	.group { zoom: 1; }

	body, #showphoto img {
	margin: 0;
	background: black;
	width: 100%;
	}

	#showphoto, #photolist {
	float: left;
	}
	#showphoto {
	width: 75%;
	color: white;
	}

	#photolist, #photolist img {
	width: 25%;
	display: block;
	float: left;
	}
	</style>

	<!-- Functions -->
	<script type="text/javascript">
	function jsonFlickrFeed(data) {
	var output = ''; //set up an output variable

	//Loop through the items in the array
	for (var i=0; i<data.items.length; i++) {
	var title = data.items[i].title; // get the title
	var photoLink = data.items[i].media.m.substring(0,56); //get just the photoID, getting rid of the link

	//prepare output
	output +='<a href="#showphoto" data-transition="fade" onclick="showPhoto(\'' + photoLink + '\',\'' + title + '\')">';
	output += '<img src="' + photoLink + '_q.jpg" alt="Photo: '+ title + '">';
	output += '</a>';
	} // go through each piece of JSON data
	$('#photolist').html(output); //send the output to the photolist ID
	} // jsonFlickrFeed


	//display the photo
	function showPhoto(photoLink, title) {
	var output = '<h3>' + title + '<h3>';
	output += '<img src="' + photoLink + '_b.jpg" alt="Photo: '+ title + '">';
	$('#showphoto').html(output);
	output = '</a>';
	}
	</script>
	</head>
	<body>
	<div id="photolist"></div>
	<div id="showphoto"></div>

	<!-- This will call the Flickr API -->
	<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=73845487@N00&format=json&extras=description;&tags=viewsource"></script>
	</body>
	</html>