cloudzoom이 fancybox와 충돌합니까?

Question

나는 내 마음을 잃어 가고있다. fancybox 내에서 클라우드 줌이 작동하도록 충돌이 발생했습니다. #fancyboxContent 스타일을 "display : none;"으로 설정하는 것과 관련이있는 것으로 좁혔습니다. 왜냐하면 cloudzoom이 fancybox에서 작동 할 것이기 때문입니다. 불행히도, 이는 오버레이 fancybox를 열기 전에 내 메인 페이지에서 볼 수 있다는 의미입니다.

이 내가 두 페이지가 실행있어, 그래서 ... 나는 SO에이 질문의 세 가지 다른 버전을 발견했지만, 불행하게도, 그들은 답이 갔다하기 때문에, 일반적인 문제가 될

보인다 - 사업부를 볼 수 있기 때문에, cloudzoom 작업을합니다 첫 번째 (fancybox/cloudzoom의 작업을 참조하는 최초의 그림 "Auzie의 엉덩이"를 클릭 : 페이지가 숨겨진 fancybox의 사업부로, 예상대로 찾고 여기 http://test.fatcat-studios.com/RnR/art_kelly_dodge2.html

을하지만, "Auzie 's Ass"(나는 이름을 짓지 않았다!)를 클릭하면 fanycbox가 열리고 확대/축소 기능은 표시되지 않습니다. http://test.fatcat-studios.com/RnR/art_kelly_dodge.html

아이디어가 있으십니까? 마감 시간에 내 머리카락을 꺼내 ​​!! 이 은 문제가되는 코드가 인 것으로 보이지만 그 이유는 알 수 없습니다.

<style> 
    div#FancyboxContent { 
     display:inherit; 
    } 
</style> 

감사!

UPDATE : 는 참고 :

이

<a class="various" href="#inline1">Fancybox Open</a> 

<div style="display: none;"> 
<div id="inline1" style="width:700px;height:600px;"> 
<table id="TableContent"> 
     <tr><td style="vertical-align: top;" width="305"> 
     <a href='../content/art/kellydodge/Australorpe_Ass.jpg' class='cloud-zoom' id='zoom1' rel="adjustX: 0, adjustY:-4"> 
     <img src="../content/art/kellydodge/Australorpe_Ass.jpg" width="300" title="Auzie's Ass" /></a> 
</td> 
<td style="vertical-align: top;"> 
<p><b>Kelly Dodge</b></p> 
<p>text here</p> 
</td></tr></table> 

</div> 
</div> 

그것은 할 수있다 :이 HTML과

$("a.various").fancybox({ 

'scrolling'  : 'no', 
'overlayColor' : '#000', 
'overlayOpacity': '0.9', 
'transitionIn' : 'none', 
'transitionOut' : 'none', 
'titlePosition' : 'inside', 
    'onComplete' : function(arg) { 
    // Here does the magic starts 
    $('#fancybox-img').wrap(
     $('<a>') 
     .attr('href', $(arg[0]).attr('href')) 
     .addClass('cloud-zoom') 
     .attr('rel', "position: 'inside'") 
    ); 
    // That's it 
    $('.cloud-zoom').CloudZoom(); 
    } 
}); 

: 그래서, 나는이 사용하여이 작업을하는 것이 가장 좋은 방법 확실하지 얻을 수있었습니다 여기에 표시 : test.fatcat-studios.com/RnR/fancybox/index2.html

감사합니다.

Answer 1

많은 스크립트와 같은 cloudzoom은 보이지 않는 개체에서 사용할 수없는 브라우저의 데이터에 따라 달라집니다. 따라서 fancybox가 열리고 난 후 cloudzoom을 호출해야합니다. 그러면 볼 수 있고 작동 할 수 있습니다.

실제로 어디서나 fancybox를 호출하는 것이 아니라 팝업을 만들기 위해 class="fancybox" 규칙을 사용하는 것으로 나타났습니다. 그래서 우리는이 같은 cloudzoom 전화를 설정 fancybox해야합니다 :

$(document).ready(function() { 
     $.fancybox({ 
      onComplete : function(){ 
       $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom(); 
      } 
     }); 
}); 

또한 나는 당신이 문제가 발생할 수로, 그 중 하나를 제거하십시오 문서에 cloud-zoom.1.0.2.js 및 could-zoom.1.0.2.min.js을 포함한났습니다.

클라우드 줌 콘텐츠가있는 하나 이상의 fancybox가있는 경우이 스크립트는 .CloudZoom();을 다시 실행하므로 문제가 발생할 수 있습니다.

페이지에

$(document).ready(function() { 
     $('.cloudyBox').each(function(){ 
      var preCloudHtml = $('uniqueCloudZoomForThisBox').html(); 
      $(this).fancybox({ //new class to use instead of fancybox 
       onComplete : function(){ 
         //create unique cloudzoom after fancybox is open 
         $('uniqueCloudZoomForThisBox').CloudZoom(); 
       }, 
       onClosed : function(){ 
         //destroy cloudzoom when fancybox closes to prevent it doubling up 
         $('uniqueCloudZoomForThisBox').html(preCloudHtml); 
       } 
      }); 
     }); 
});