I'm trying to have a photo gallery display in a Lightbox (or a similar gallery type thing), but my client wants the photos to come from a Facebook album to avoid having to upload photos twice.
i'm working within wordpress, but i looked around at some of the plugins available and they don't seem very promising.
what is my best plan of attack here? I have't really begun to dig into the facebook api, but if that's what you guys suggest than i'll go ahead and do it.i'm pretty familiar with javascript and php. i don't want to go down that rabbit hole until i'm sure that it's going to work.
i'm just really looking for people to share some insights, because i don't really know where to begin.
Edit:
This is where i'm stuck...
this seems totally valid to me, why isn't it working...?
i'm working within wordpress, but i looked around at some of the plugins available and they don't seem very promising.
what is my best plan of attack here? I have't really begun to dig into the facebook api, but if that's what you guys suggest than i'll go ahead and do it.i'm pretty familiar with javascript and php. i don't want to go down that rabbit hole until i'm sure that it's going to work.
i'm just really looking for people to share some insights, because i don't really know where to begin.
Edit:
This is where i'm stuck...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Photo Gallery</title>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$.getJSON('http://graph.facebook.com/356611067762340/photos').then(function(response) {
// 0-8, 0 returns the largest available images, 8 the smallest
var imageIndex = 5;
var images = _(response.data)
.chain()
.pluck('images')
.pluck(imageIndex)
.value();
console.log(images);
_(images).each(function(image) {
$('#image-container').append(
$('<img>').attr('src', image.source)
);
});
});
</script>
</head>
<body>
<div id="image-container"></div>
</body>
</html>
this seems totally valid to me, why isn't it working...?