I have literally looked everything up online, with no success, so now I am turning to those who know exactly what they are doing.

I am loading images from facebook, using a nice little tool that utulises jQuery to load up images from a certain album on a fan page.

Here is the page that I am currently working on: http://www.sfssc.ca/houstonwehaveaproblem.html

My problem, is that I cannot get the images on the bottom of the page to work with slimbox.

The script for this is

Code:
<script>
jQuery(document).ready(function() {
var AlbumID = "163187497033669";
var graph = "https://graph.facebook.com/" + AlbumID + "/photos?callback=?";
jQuery.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><a class="imageLink" rel="lightbox" href="' + val2.source + '" ><img src="' + val2.picture + '"/></a></li>'
);
};
};
};
jQuery('<ul />', {
'class': 'album',
html: albumItem.join('')
}).appendTo('#FBalbum');
});
});

</script>
The only changes I have done to this script, is added rel="lightbox" on the 12th line. When I did research, I found out that slimbox isnt loading these images because the DOM does not have the images when slimbox is loaded because they are added afterwards and slimbox only works for links which are ALREADY present when function is called.

Problem is, is that I dont know how to load slimbox again once the photos from the facebook fetcher are loaded.

Feel free to look at my source

If anyone could help me with this, it would be greatly appreciated.