JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<title>Reading JSON with jQuery</title>
	<link rel="stylesheet" href="css/jquery.lightbox-0.5.css" type="text/css" media="screen,projection" />
>


	<h1> Using jQuery to Read a JSON Feed </h1>

	<div id="container">
		<div id="user-wrap">
			<h2> Select a Person to See Their Photos &#187; </h2>
			<ul id="users"></ul>
			<p>
				Thanks to <a href="http://twitter.com/ljmadd">Linsday</a>, 
				<a href="http://twitter.com/nshontz">Nick</a>, 
				<a href="http://twitter.com/nazly">Nazly</a>, and 
				<a href="http://twitter.com/msheeraz">Mohamed</a> for 
				letting me use their photostreams in this demo!
			</p>
		</div>
		<p id="feed"></p>
	</div>

	<p>
		The photos above are loaded by calling this function:
	</p>
	
<pre><code class="js"></code></pre>

<p>This example was put together by <a href="http://twitter.com/jasonatennui">Jason Lengstorf</a> for <a href="http://ennuidesign.com">Ennui Design</a> (July 1, 2009)</p>
	



</body>

</html>

CSS

body {
		  font-size:14px;
		}
		h1 {
		  display:block;
		  margin:10px auto 20px;
		  font:24px/30px georgia, serif;
		  text-align:center;
		  letter-spacing:.06em;
		  color:#222;
		}
		#container {
		  width:750px;
		  margin:10px auto;
		}
		#user-wrap {
		  width:340px;
		  float:left;
		}
		h2 {
		  font:18px/30px georgia, serif;
		  letter-spacing:.06em;
		}
		#user-wrap p {
		  width:320px;
		}
		#feed {
		  float:left;
		  width:308px;
		  height:308px;
		  margin:10px auto;
		  border:4px solid #222;
		  background:#FFF;
		  overflow:hidden;
		}
		#feed > span {
		  display:block;
		  margin:130px auto;
		  padding:0;
		  text-align:center;
		}
		#feed > a > img {
		  border:1px solid #DDD;
		}
		p, pre {
		  width:960px;
		  margin:10px auto;
		  color:#444;
		  clear:both;
		}
		p#feed {
		  clear:none;
		}
		p {
		  letter-spacing:.04em;
		}
		pre {
		  border:1px solid #444;
		  padding:10px;
		  background:#FCFCFC;
		}

JavaScript

function loadFlickr(flickrid)
{
	// Display a loading icon in our display element
	$(&#39;#feed&#39;).html(&#39;&lt;span&gt;&lt;img src=&quot;images/lightbox-ico-loading.gif&quot; /&gt;&lt;/span&gt;&#39;);

	// Request the JSON and process it
	$.ajax({
		type:&#39;GET&#39;,
		url:&quot;http://api.flickr.com/services/feeds/photos_public.gne&quot;,
		data:&quot;id=&quot;+flickrid+&quot;&amp;lang=en-us&amp;format=json&amp;jsoncallback=?&quot;,
		success:function(feed) {
			// Create an empty array to store images
			var thumbs = [];

			// Loop through the items
			for(var i=0, l=feed.items.length; i &lt; l &amp;&amp; i &lt; 16; ++i) 
			{
				// Manipulate the image to get thumb and medium sizes
				var img = feed.items[i].media.m.replace(
					/^(.*?)_m\.jpg$/, 
					&#39;&lt;a href=&quot;$1.jpg&quot;&gt;&lt;img src=&quot;$1_s.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&#39;
				);

				// Add the new element to the array
				thumbs.push(img);
			}

			// Display the thumbnails on the page
			$(&#39;#feed&#39;).html(thumbs.join(&#39;&#39;));

			// A function to add a lightbox effect
			addLB();
		},
		dataType:&#39;jsonp&#39;
	});
}