"
Team:TU Delft/fb display
From 2010.igem.org
(Difference between revisions)
| (5 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 = ""; | ||
| - | |||
var done={}, j=0, und; | var done={}, j=0, und; | ||
| Line 40: | Line 62: | ||
while(j<n) { | while(j<n) { | ||
| - | var x = Math. | + | 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 50: | Line 73: | ||
} | } | ||
catch (err) { | catch (err) { | ||
| - | + | // $("#photobox" + albumID).html("Error: " + err.description); | |
| + | $("#photobox" + albumID).delay(400).queue(fetchPhotos); | ||
} | } | ||
} | } | ||
| - | + | $("#photobox" + albumID).click(fetchPhotos).delay(300).queue(fetchPhotos); | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | $("#photobox" + albumID).click(fetchPhotos).delay( | + | |
}); | }); | ||
</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...
