Team:TU Delft/fb display

From 2010.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
-
This is a template page that display 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}}</nowiki>
+
  <nowiki>{{:Team:TU_Delft/fb_display|album=ID|count=Number of images|css=CSS class}}</nowiki>
  Parameters:  
  Parameters:  
  album: Facebook album ID
  album: Facebook album ID
  count: Number of pictures to display
  count: Number of pictures to display
 +
css: CSS class for each image
</noinclude>
</noinclude>
<html>
<html>
-
<div id="fb_scriptload"></div>
+
<div id="fb_scriptload</html>{{{album|135033906513449}}}<html>"></div>
-
<div id="photobox"></div>
+
<div id="photobox</html>{{{album|135033906513449}}}<html>">loading facebook photo's...</div>
<style>
<style>
-
.fb_photo {
+
.fb_photo</html>{{{album|135033906513449}}}<html> {
  margin: 4px 4px 4px 4px;
  margin: 4px 4px 4px 4px;
}
}
Line 21: Line 27:
<script type="text/javascript">
<script type="text/javascript">
-
var albumID = "</html>{{{album|133985909951582}}}<html>";
+
// needs to be global for jsonp invoke
 +
var fb_photos</html>{{{album|135033906513449}}}<html>;
-
function fb_photos(response) {
+
$(function() {
-
   var n = </html>{{{count|6}}}<html>; // select 6 random pictures
+
 
 +
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 imghtml = "";
   var imghtml = "";
   var done={}, j=0, und;
   var done={}, j=0, und;
 +
 +
  if(response.error) {
 +
    $("#photobox" + albumID).html("Facebook returned an error: " + response.error.message);
 +
    return;
 +
  }
 +
 +
  try {
 +
   var remaining=response.data;
   var remaining=response.data;
   if (n>response.data.length)
   if (n>response.data.length)
Line 32: 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];
     var imgSmall = item.picture;
     var imgSmall = item.picture;
-
     imghtml += '<a href="'+ item.link +'"><img class="fb_photo" src=\"'+imgSmall+'"></a>';
+
     imghtml += '<a href="'+ item.link +'"><img class="</html>{{{css|fb_photo135033906513449}}}<html>" src=\"'+imgSmall+'"></a>';
     j++;
     j++;
   }
   }
-
   $("#photobox").html(imghtml);
+
   $("#photobox" + albumID).html(imghtml);
-
}
+
  }
-
 
+
  catch (err) {
-
 
+
//   $("#photobox" + albumID).html("Error: " + err.description);
-
$(function() {
+
    $("#photobox" + albumID).delay(400).queue(fetchPhotos);
-
 
+
   }
-
var baseurl = "https://graph.facebook.com/";
+
-
 
+
-
function addScript(url) {
+
-
  var html = '<script src="'+ url + '" type="text/javascript"></scr'+'ipt>';
+
-
  $("#fb_scriptload").html(html);
+
-
}
+
-
 
+
-
function fetchPhotos() {
+
-
   addScript(baseurl + "/" + albumID + "/photos?callback=fb_photos");
+
}
}
-
fetchPhotos();
 
 +
$("#photobox" + albumID).click(fetchPhotos).delay(300).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"