Team:TU Delft/fb display

From 2010.igem.org

(Difference between revisions)
 
(6 intermediate revisions not shown)
Line 2: Line 2:
This is a template page that displays random pictures from a facebook album.
This is a template page that displays random pictures from a facebook album.
 +
You can get the album ID by using [[Team:TU_Delft/fb_listalbums|fb_listalbums]]
 +
 +
Either use this template or give credits to the TU Delft team!
 +
If you have questions, contact me: [[User:jcnossen|Jelmer Cnossen]]
 +
<br>
<br>
  <nowiki>{{:Team:TU_Delft/fb_display|album=ID|count=Number of images|css=CSS class}}</nowiki>
  <nowiki>{{:Team:TU_Delft/fb_display|album=ID|count=Number of images|css=CSS class}}</nowiki>
Line 22: Line 27:
<script type="text/javascript">
<script type="text/javascript">
-
function fb_photos</html>{{{album|135033906513449}}}<html>(response) {
+
// needs to be global for jsonp invoke
 +
var fb_photos</html>{{{album|135033906513449}}}<html>;
 +
 
 +
$(function() {
 +
 
 +
var albumID = "</html>{{{album|135033906513449}}}<html>";
 +
var baseurl = "https://graph.facebook.com/";
 +
 
 +
 
 +
function addScript(url) {
 +
  var html = '<script src="'+ url + '" type="text/javascript"></scr'+'ipt>';
 +
  $("#fb_scriptload" + albumID).html(html);
 +
}
 +
 
 +
function fetchPhotos() {
 +
  addScript(baseurl + "/" + albumID + "/photos?callback=fb_photos"+albumID);
 +
}
 +
 
 +
fb_photos</html>{{{album|135033906513449}}}<html> = function (response) {
   var n = </html>{{{count|6}}}<html>;
   var n = </html>{{{count|6}}}<html>;
   var imghtml = "";
   var imghtml = "";
Line 28: Line 51:
   if(response.error) {
   if(response.error) {
-
     $("#photobox</html>{{{album|135033906513449}}}<html>").html("Facebook returned an error: " + response.error.message);
+
     $("#photobox" + albumID).html("Facebook returned an error: " + response.error.message);
     return;
     return;
   }
   }
 +
 +
  try {
   var remaining=response.data;
   var remaining=response.data;
Line 37: Line 62:
   while(j<n) {
   while(j<n) {
-
     var x = Math.round( Math.random()*remaining.length );
+
     var x = Math.floor( Math.random()*remaining.length );
 +
    x = Math.min(Math.max(0,x),remaining.length-1);
     var item = remaining.splice(x, 1)[0];
     var item = remaining.splice(x, 1)[0];
Line 44: Line 70:
     j++;
     j++;
   }
   }
-
   $("#photobox</html>{{{album|135033906513449}}}<html>").html(imghtml);
+
   $("#photobox" + albumID).html(imghtml);
 +
  }
 +
  catch (err) {
 +
//    $("#photobox" + albumID).html("Error: " + err.description);
 +
    $("#photobox" + albumID).delay(400).queue(fetchPhotos);
 +
  }
}
}
-
$(function() {
+
$("#photobox" + albumID).click(fetchPhotos).delay(300).queue(fetchPhotos);
-
 
+
-
var albumID = "</html>{{{album|135033906513449}}}<html>";
+
-
 
+
-
var baseurl = "https://graph.facebook.com/";
+
-
 
+
-
function addScript(url) {
+
-
  var html = '<script src="'+ url + '" type="text/javascript"></scr'+'ipt>';
+
-
  $("#fb_scriptload" + albumID).html(html);
+
-
}
+
-
 
+
-
function fetchPhotos() {
+
-
  addScript(baseurl + "/" + albumID + "/photos?callback=fb_photos"+albumID);
+
-
}
+
-
 
+
-
$("#photobox" + albumID).click(fetchPhotos).delay(600).queue(fetchPhotos);
+
});
});
</script>
</script>
</html>
</html>

Latest revision as of 10:57, 7 October 2010


This is a template page that displays random pictures from a facebook album. You can get the album ID by using fb_listalbums

Either use this template or give credits to the TU Delft team! If you have questions, contact me: Jelmer Cnossen 


{{:Team:TU_Delft/fb_display|album=ID|count=Number of images|css=CSS class}}
Parameters: 
album: Facebook album ID
count: Number of pictures to display
css: CSS class for each image


loading facebook photo's...

Retrieved from "http://2010.igem.org/Team:TU_Delft/fb_display"