2011-11-09 3 views
2

Fancybox를 사용하고 있습니다.Fancybox 프리 로딩 이미지 표시 방법

다음 링크를 클릭하면 모달 창이 열리지 만 내용이로드되는 동안 모달 창이 나타납니다.

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

그래서 콘텐츠가로드되는 동안 애니메이션 이미지를 표시하려고합니다.

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

이 다음과 같은 생산 :

enter image description here

이 애니메이션되지 그러나 나는 링크를 클릭 할 때 호출되는 다음 있습니다. 정적 이미지입니다. 동적 이미지를 표시하도록로드하려면 어떻게해야합니까?

감사합니다.

답변

3
당신이 fancybox의 API를 사용할 수 있습니다

:

표시 로딩 애니메이션 :

$.fancybox.showActivity() 

숨기기 로딩 애니메이션 :

$.fancybox.hideActivity() 
+0

어디에서 $ .fancybox.hideActivity()를 넣을까요? 나는 fancybox에로드 된 실제 페이지에 놓으려고했으나 회전하는 바퀴를 숨 깁니다. – chell

+0

알았어요. 나는 부모님이 필요합니다. $. fancybox.hideActivity() – chell

+0

이것은 엿 같아서 작동하지 않습니다. –

4

Fancybox 2의 경우, 적절한 방법을 사용하기는 $.fancybox.showLoading();$.fancybox.hideLoading(); 있습니다