Skip to content

Instantly share code, notes, and snippets.

@inazt
Created September 23, 2010 13:41
Show Gist options
  • Save inazt/593618 to your computer and use it in GitHub Desktop.
Save inazt/593618 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>See own Albums with big photos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
$(document).ready(function() {
jQuery('#reload').hide();
// initialize the library with the API key
FB.init({ apiKey: 'ad152b9a2419a3bb5dfdcc58bb7832c9', status:true, logging: true, cookie: true, xfbml: true });
jQuery('#clear').hide();
$('#clear').bind('click', function() {
jQuery('#result').html('');
jQuery('#clear').hide();
});
$('#reload').bind('click', function() {
location.reload();
});
$('#disconnect').bind('click', function() {
FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
});
clearDisplay();
jQuery('#reload').show('slow');
});
FB.getLoginStatus(function(response) {
if (response.session) {
//console.log('already logged');
getPhotos();
}
else {
FB.login(function(response) {
if(response.session) {
//console.log('login completed!')
getPhotos()
}
else {
// user is not logged in
}
}, {perms:'user_photos'});
} // else
}); // getLoginStatus
}); // document.ready
// no user, clear display
function clearDisplay() {
$('#albums, #result, #disconnect').hide('fast');
}
function getAlbumInfo(id) {
var loading = new Image();
loading.src = 'http://together.in.th/ajax/loading.gif';
loading.id = 'loading';
jQuery('#result').html('').append(loading).append('<br id="headbr">');;
jQuery('#clear').show();
$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );
FB.api('/'+id+'/photos', function(resp) {
FB.Array.forEach(resp.data, function(pic) {
//console.log(pic);
a = new Image()
a.src = pic.source;
jQuery('#result').append(a)
})
jQuery('#result').append('<hr width=85%>');
jQuery('#loading, #headbr').remove();
})
}
function getPhotos() {
FB.api('/me/albums', function(response) {
FB.Array.forEach(response.data, function(album) {
//console.log('albumID', album.id, album)
jQuery('#albums').append("<h1>"+ album.name +"(" + album.count +")</h1>");
var cover = new Image();
cover.id = album.id;
cover.src = 'https://graph.facebook.com/'+album.id+'/picture?access_token='+FB._session['access_token'];
jQuery(cover).bind('click', function() {
getAlbumInfo(cover.id);
});
jQuery('#albums').append(cover).append('<br><br>');
});
});
}
</script>
</head>
<body>
<div>
<button id="clear">Clear!</button>
</div>
<div id="user-info" style="display: none;"></div>
<div id="fb-root"></div>
<div id="result"></div>
<div id="albums"></div>
<button id="disconnect">Disconnect</button>
<button id="reload">Reconnect!</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment