Team:Bielefeld-Germany/Photos

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Bielefeld_2011_Header}}
{{Bielefeld_2011_Header}}
-
 
-
TEST 1 2 3
 
<html>
<html>
 +
<div style="text-align:center">
<script>
<script>
-
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=87cadbf368e5ccf9f11f9ba0f58fccbe8&user_id=62454421@N04&format=json&jsoncallback=?", function (data) {
+
function jsonFlickrApi(rsp) {
-
    var list = $("<ul></ul>");
+
if (rsp.stat != "ok"){
-
    $.each(data.photosets.photoset, function (i, set) {
+
  // If this executes, something broke!
-
        var link = $("<a/>").attr("title", set.description._content)
+
  return;
-
            .attr("href", "http://www.flickr.com/photos/igem-bielefeld/sets/" + set.id)
+
}
-
            .text(set.title._content);
+
-
        var li = $("<li/>").append(link).append(" (" + set.photos + ")");
+
//variable "s" is going to contain
-
        $(list).append(li);
+
//all the markup that is generated by the loop below
-
    });
+
var s = "";
-
    $("#flickr-sets").append(list);
+
-
});
+
//this loop runs through every item and creates HTML
 +
for (var i=0; i < rsp.photos.photo.length; i++) {
 +
//for (var i=0; i < 10; i++) {
 +
  photo = rsp.photos.photo[ i ];
 +
 
 +
  //notice that "t.jpg" is where you change the
 +
  //size of the image
 +
  t_url = "http://farm" + photo.farm +
 +
  ".static.flickr.com/" + photo.server + "/" +
 +
  photo.id + "_" + photo.secret + "_" + "t.jpg";
 +
 
 +
b_url = "http://farm" + photo.farm +
 +
  ".static.flickr.com/" + photo.server + "/" +  
 +
  photo.id + "_" + photo.secret + "_" + "z.jpg";
 +
   
 +
  p_url = "http://www.flickr.com/photos/" +
 +
  photo.owner + "/" + photo.id;
 +
 
 +
  s +=  '<a class="lightbox" href="' + b_url + '">' + '<img alt="'+
 +
  photo.title + '"src="' + t_url + '" style="margin:10px; border:1px solid gray;" />' + '</a>';
 +
}
 +
 
 +
document.writeln(s);  
 +
//this tells the JavaScript to write
 +
//everything in variable "s" onto the page
 +
}
</script>
</script>
 +
<script type="text/javascript" language="javascript" src="http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&user_id=62454421@N04&api_key=7cadbf368e5ccf9f11f9ba0f58fccbe8&count=5"></script>
 +
</div>
</html>
</html>

Revision as of 08:16, 20 September 2011