JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<title>Reading JSON with jQuery</title>
	<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">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;
	});
}</code></pre>

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

var people = ([{
			"name":"Jason Lengstorf", 
			"id":"29080075@N02"
		},
		{
			"name":"Lindsay Maddox",
			"id":"15951645@N03"
		},
		{
			"name":"Nick Shontz",
			"id":"33608338@N04"
		},
		{
			"name":"Nazly Ahmed",
			"id":"40608624@N00"
		},
		{
			"name":"Mohamed Sheeraz",
			"id":"29946260@N03"
		}]);

		$(document).ready(function() {
			for(i=0, l=people.length; i<l; ++i)
			{
				$('#users').append(
					'<li><a href="javascript:loadFlickr(\''
						+people[i].id+'\')">'+people[i].name+"</a></li>\n"
				);
			}
			loadFlickr("29080075@N02");
		});

		function loadFlickr(flickrid)
		{
			// Display a loading icon in our display element
			$('#feed').html('<span><img src="images/lightbox-ico-loading.gif" /></span>');
		
			// Request the JSON and process it
			$.ajax({
				type:'GET',
				url:"http://api.flickr.com/services/feeds/photos_public.gne",
				data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",
				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 < l && i < 16; ++i) 
					{
						// Manipulate the image to get thumb and medium sizes
						var img = feed.items[i].media.m.replace(
							/^(.*?)_m\.jpg$/, 
							'<a href="$1.jpg"><img src="$1_s.jpg" alt="" /></a>'
						);
		
						// Add the new element to the array
						thumbs.push(img);
					}
		
					// Display the thumbnails on the page
					$('#feed').html(thumbs.join(''));
		
					// A function to add a lightbox effect
					addLB();
				},
				dataType:'jsonp'
			});
		}

       ChiliBook.replaceSpace = "&nbsp;";
		function addLB() {
			$('#feed a').lightBox();
		}