Question

So I am having some real difficulty figuring out how to make the following script work. It loads a facebook photo album onto the page, but then I need to call $("a.fancied").fancybox(); to make lightbox work.

The code below attempts to execute this line as a callback to getJSON(), but I am kind of a novice at all this and just cannot figure out why it is not working.

If I type in the console after everything is all loaded $("a.fancied").fancybox(); works no problem.

The site in action: http://bagsoffunkansascity.org/white-party-2011.html

 <div id="FBalbum"></div> 
    <script> 
    $(document).ready(function() {

        var AlbumID = "206175519447064";

        var graph = "https://graph.facebook.com/" + AlbumID + "/photos?callback=?";        
        $.getJSON(graph, function(data) {
            var albumItem = [];
            $.each(data, function(key, val) {
                $.each(val, function(key2, val2) {
                    if (val2.source != undefined){
                        albumItem.push(
                            '<li id="' + key2 + '"><a class="fancied" href="' + val2.source + '"><img src="' + val2.picture + '" /></a></li>'
                        );
                    }
                }); 
            });        
            $('<ul />', {
                'class': 'album',
                html: albumItem.join('')
            }).appendTo('#FBalbum'); 
        }, function(){
           $("a.fancied").fancybox();
       });    
    });
    </script> 

Thanks!

Answer 1

try this code, works for me:

<script> 
$(document).ready(function() {

    var AlbumID = "206175519447064";

    var graph = "https://graph.facebook.com/" + AlbumID + "/photos?callback=?";        
    $.getJSON(graph, function(data) {
        var albumItem = [];
        for(var key in data){
            for(var key2 in data[key]){
                val2=data[key][key2];
                if(typeof(val2.source)!="undefined"){
                    albumItem.push(
                        '<li id="' + key2 + '"><a class="fancied" href="' + val2.source + '"><img src="' + val2.picture + '" /></a></li>'
                    );
                }
            }
        }
        $('<ul />', {
            'class': 'album',
            html: albumItem.join('')
        }).appendTo('#FBalbum'); 
       $("a.fancied").fancybox();
    });    
});
</script>

Basically $.each is asynchronous and when you’re creating the albumItem is empty.

Let me know if you need anything else.

Cheers

G.