cloudzoomとfancyboxとの競合？

Question

私はここで私の心を失っています。私は、ファンシーボックス内で動作するようにクラウドズームを得ることに矛盾があります。 #fancyboxContentスタイルが "display：none;"に設定されていることと関係があることに絞り込んだ。クラウドズームはファンシーボックスで動作しますが残念ながら、それは目的を破るオーバーレイファンシーボックスを開く前に私のメインページに表示されていることを意味します。

これがそう

...私はSOにこの質問の他の三つのバージョンを見つけたが、残念ながら、彼らは未回答行っているので、一般的な問題のようです、私が実行している2つのページを持っています - div要素が 表示されているので、（fancybox/cloudzoomの作業を見て最初の絵「Auzieのお尻」をクリックしてcloudzoomの作業で最初： http://test.fatcat-studios.com/RnR/art_kelly_dodge2.html

はここfancybox divの隠しで、それが必要と見ているページですが、 「Auzie's Ass」をクリックすると（私は名前を付けなかった！）、fanycboxは開いているが、ズーム機能は表示されない： http://test.fatcat-studios.com/RnR/art_kelly_dodge.html

私は期限切れになり、私の髪を引き出す！ これはですが、問題になっているコードはと思われますが、その理由はわかりません！

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

ありがとうございます！

UPDATE： FYI：この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(); 
    } 
}); 

：：だから、私は、それが最善の方法だと確信し、これは、これを使用して動作するように取得することができませんでした

<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> 

それができますここに表示されます：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を含めている気づいた、それは問題を引き起こす可能性があるとして、そのうちの一つを削除してください。

クラウドズームのコンテンツを含む複数のファンシーボックスがある場合、このスクリプトはもう一度.CloudZoom();を実行するため、問題が発生する可能性があります。あなたのページでこれを制御するJavaScriptでどこ

$(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); 
       } 
      }); 
     }); 
});