Team:TU Delft/fb display

From 2010.igem.org

(Difference between revisions)
 
(21 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) {
+
-
  var n = </html>{{{count|6}}}<html>; // select 6 random pictures
+
-
  var imghtml = "";
+
-
  var done={}, j=0, und;
+
-
 
+
-
  while(j<n) {
+
-
    var x = Math.round( Math.random()*response.data.length );
+
-
    if (!(und === done[x]))
+
-
      continue;
+
-
    done[x] = 1;
+
-
 
+
-
    var item = response.data[x];
+
-
    var imgSmall = item.picture;
+
-
    imghtml += '<a href="'+ item.link +'"><img class="fb_photo" src=\"'+imgSmall+'"></a>';
+
-
    j++;
+
-
  }
+
-
  $("#photobox").html(imghtml);
+
-
}
+
-
 
+
$(function() {
$(function() {
 +
var albumID = "</html>{{{album|135033906513449}}}<html>";
var baseurl = "https://graph.facebook.com/";
var baseurl = "https://graph.facebook.com/";
 +
function addScript(url) {
function addScript(url) {
   var html = '<script src="'+ url + '" type="text/javascript"></scr'+'ipt>';
   var html = '<script src="'+ url + '" type="text/javascript"></scr'+'ipt>';
-
   $("#fb_scriptload").html(html);
+
   $("#fb_scriptload" + albumID).html(html);
}
}
function fetchPhotos() {
function fetchPhotos() {
-
   addScript(baseurl + "/" + albumID + "/photos?callback=fb_photos");
+
   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 done={}, j=0, und;
 +
 
 +
  if(response.error) {
 +
    $("#photobox" + albumID).html("Facebook returned an error: " + response.error.message);
 +
    return;
 +
  }
 +
 
 +
  try {
 +
 
 +
  var remaining=response.data;
 +
  if (n>response.data.length)
 +
    n=response.data.length;
 +
 
 +
  while(j<n) {
 +
    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 imgSmall = item.picture;
 +
    imghtml += '<a href="'+ item.link +'"><img class="</html>{{{css|fb_photo135033906513449}}}<html>" src=\"'+imgSmall+'"></a>';
 +
    j++;
 +
  }
 +
  $("#photobox" + albumID).html(imghtml);
 +
  }
 +
  catch (err) {
 +
//    $("#photobox" + albumID).html("Error: " + err.description);
 +
    $("#photobox" + albumID).delay(400).queue(fetchPhotos);
 +
  }
}
}
-
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"