Search code examples
ruby-on-railsfancybox

How to show Fancybox preloading image

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:

enter image description here

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

Thanks.

Solution

  • You can use these fancybox's APIs:

    Show loading animation:

    $.fancybox.showActivity()

    Hide loading animation:

    $.fancybox.hideActivity()