Search code examples
jqueryfaceboxanimated-gif

Showing animated "loading" gif before the actual html content appears in Lightbox/Facebox

Hey guys, I'm trying to show an animated gif for 2 seconds before the actuall content appears in a lightbox (Facebox). How can make this happen?

The Facebox module gets triggered after a form submit and so far I have this code:

<script type="text/javascript">

    $('#submitform').submit(function() {
        $('#loader').show();
        $.post('/file.php', function() {
            $('#loader').hide();
        });
        return false;
    });

</script>

The loader is placed in like this:

<div id="info" style="display:none;">
    The content...

<div id="loader"><img src="http://notifly.se/notifly/images/loader.gif"></div></div>

Thanx!!!

Solution

  • Found the solution to this problem in the Facebox documentation.

    You need to wrap your code around:

    $(document).bind('reveal.facebox', function() { *//code here//* }

    Now all jQuery works inside of Facebox.