|
<!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> |
