Question

I am using Fancybox.

When the following link is clicked the modal window opens but it just shows a white box while the content loads.

<a class="iframe"  href="/icons/?icon_for=<%=@user.class.name%>&category=<%=Icon::USER_DEFAULT%>" id="user_iframe">
                                        <%= image_tag("avatar-bis.png", :width => 140, :height => 128, :class => "dotted")%>
                                </a>

So I want to show the animated image while the content loads.
I have the following which is called when the link is clicked:

<script>
      $('a.iframe').live("click",function(){
        $('#fancybox-loading').show();
        });
</script>

This produces the following:

However it is not animated. It is a static image. How can I load it so it shows a dynamic image?

Thanks.

Answer 1

You can use these fancybox’s APIs:

Show loading animation:

$.fancybox.showActivity()   

Hide loading animation:

$.fancybox.hideActivity()