joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Display the last 20 images from Sewanee's photo stream using Flickr's Public feed API.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }

  img {
    border: 0;
  }
  #images {
    margin: 30px;
  }

  #images ul {
    list-style: none;
  }

  #images ul li {
    float: left;
    margin-left: 10px;
  }
</style>
<body>
  <div id="images"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>

<script>
    var listItems  = [];  // `li` elements for unordered list of images


    // add `li` element to listItems
    var addItem = function (item) {

        var img = (item.media.m).replace("_m.jpg", "_s.jpg");
        var li = '<li><a href="' + item.link + '" target="_blank">';
        li += '<img src="' + img + '" title="'+ item.title + '"/>';
        li += '</a></li>';
        listItems.push(li);
    }


    // callback to display returned image data
    var display = function (data) {

        data.items.forEach(addItem);
        var ul = '<ul>' + listItems.join('') + '</ul>'
        $('#images').html(ul);
    }


    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=32612727@N07&lang=en-us&format=json&jsoncallback=?", display);
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}

	img {
	border: 0;
	}
	#images {
	margin: 30px;
	}

	#images ul {
	list-style: none;
	}

	#images ul li {
	float: left;
	margin-left: 10px;
	}
	</style>
	<body>
	<div id="images"></div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>

	<script>
	var listItems = []; // `li` elements for unordered list of images


	// add `li` element to listItems
	var addItem = function (item) {

	var img = (item.media.m).replace("_m.jpg", "_s.jpg");
	var li = '<li><a href="' + item.link + '" target="_blank">';
	li += '<img src="' + img + '" title="'+ item.title + '"/>';
	li += '</a></li>';
	listItems.push(li);
	}


	// callback to display returned image data
	var display = function (data) {

	data.items.forEach(addItem);
	var ul = '<ul>' + listItems.join('') + '</ul>'
	$('#images').html(ul);
	}


	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=32612727@N07&lang=en-us&format=json&jsoncallback=?", display);
	</script>