Facebox loading

[coolio99]

Hey how can I add that loading image to my facebox window? Because my
script needs like 2-3s before it outputs result :)

Thanks.

[raK0]

Hi,

If u take a look to the code you will notice that in the loading
function they are appending the loader to a element whose css class
is .body
something like this,

$('#facebox .body').children().hide().end().
append('<div class="loading"><img src="'+
$.facebox.settings.loadingImage+'"/></div>')

I made it work this way,

$.extend($.facebox, {
settings: {
opacity : 0.2,
overlay : true,
loadingImage : 'fbloader.gif',
closeImage : '',
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
faceboxHtml : '\
<div id="facebox" style="display:none;"> \
<div class="popup"> \
<div class="content"> \
</div> \
<div class="body"> \
</div> \
<a href="#" class="close"></a> \
</div> \
</div>'
},

loading: function() {
init()
if ($('#facebox .loading').length == 1) return true
showOverlay()

$('#facebox .content').empty()
$('#facebox .body').children().hide().end().
append('<div class="loading"><img src="'+
$.facebox.settings.loadingImage+'"/></div>')

$('#facebox').css({
top: getPageScroll()[1] + (getPageHeight() / 10),
left: $(window).width() / 2 - 205
}).show()

$(document).bind('keydown.facebox', function(e) {
if (e.keyCode == 27) $.facebox.close()
return true
})
$(document).trigger('loading.facebox')
},

close_loading: function() {
$('#facebox .body').empty();
},.........
.....

Since the loader is not triggered automatically (dunno why) i coded
so,

$("#test2").click(function(){
$.facebox(function() {
$.facebox.loading();
$.get('whatever.php', function(data) {
$.facebox.close_loading();
$.facebox(data);
})
})
})