Team:University College London/fbphotosbytudelft

From 2012.igem.org

(Difference between revisions)
 
(26 intermediate revisions not shown)
Line 25: Line 25:
</noinclude>
</noinclude>
<html>
<html>
-
<div id="fb_scriptload</html>{{{album|135033906513449}}}<html>"></div>
+
<div id="fb_scriptload</html>{{{album}}}<html>"></div>
-
<div align="center"> class="fb_photoscroll" id="photobox</html>{{{album|135033906513449}}}<html>">loading facebook photo's...</div>
+
<div align="center" class="fb_photoscroll" id="photobox</html>{{{album}}}<html>">loading facebook photos...</div>
<style>
<style>
-
.fb_photo</html>{{{album|135033906513449}}}<html> {
+
.fb_photo</html>{{{album}}}<html> {
  margin: 4px 4px 4px 4px;
  margin: 4px 4px 4px 4px;
}
}
Line 37: Line 37:
// needs to be global for jsonp invoke
// needs to be global for jsonp invoke
-
var fb_photos</html>{{{album|135033906513449}}}<html>;
+
var fb_photos</html>{{{album}}}<html>;
$(function() {
$(function() {
-
var albumID = "</html>{{{album|135033906513449}}}<html>";
+
var albumID = "</html>{{{album}}}<html>";
var baseurl = "https://graph.facebook.com/";
var baseurl = "https://graph.facebook.com/";
Line 50: Line 50:
function fetchPhotos() {
function fetchPhotos() {
-
   addScript(baseurl + "/" + albumID + "/photos?callback=fb_photos"+albumID);
+
   addScript(baseurl + "/" + albumID + "/photos?limit=100&offset=0&callback=fb_photos"+albumID);
}
}
-
fb_photos</html>{{{album|135033906513449}}}<html> = function (response) {
+
fb_photos</html>{{{album}}}<html> = function (response) {
   // template parameters
   // template parameters
   var n = </html>{{{count|6}}}<html> - 1;
   var n = </html>{{{count|6}}}<html> - 1;
-
  var animate = </html>{{{animate|true}}}<html>;
 
   var j=0;
   var j=0;
Line 63: Line 62:
     return;
     return;
   }
   }
-
 
+
  var html = '';
   for(j=0;j<response.data.length;j++) {
   for(j=0;j<response.data.length;j++) {
-
    if(j>n) { break; }
 
     var item = response.data[j];
     var item = response.data[j];
     var imgSmall = item.picture;
     var imgSmall = item.picture;
-
     html += '<a href="'+ item.link +'" target="blank"><img class="</html>{{{css|fb_photo135033906513449}}}<html>" src=\"'+imgSmall+'"></a>';
+
     var imgBig = item.source;
 +
    var imgName = item.name;
 +
    if(typeof imgName == "undefined") { imgName = ""; }
 +
    if(j>n) {
 +
          html += '<a rel="lightbox[</html>{{{album}}}<html>]" href="'+imgBig+'" title="'+imgName+'"></a>';
 +
          }else{
 +
          html += '<a rel="lightbox[</html>{{{album}}}<html>]" href="'+imgBig+'" title="'+imgName+'"><img class="</html>{{{css|fbphoto}}}<html>" src=\"'+imgSmall+'"></a>';
 +
          }
   }
   }
   $("#photobox" + albumID).html(html);
   $("#photobox" + albumID).html(html);

Latest revision as of 12:19, 19 August 2012


Intro

This is a template page that lists all pictures from a facebook album.

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

How To Use This

  • Find a facebook album ID to display, using fb_listalbums
  • Put the generated code from fb_listalbums in your wiki, and modify it.

Parameters


{{:Team:TU_Delft/fb_photodisplay|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
callback: Javascript callback function name, callback(container)


loading facebook photos...