cloudzoom與fancybox衝突？

Question

我在這裏失去了我的想法。我有一個衝突讓雲變焦在fancybox內工作。我將它縮小到與我的#fancyboxContent樣式設置爲「display：none;」有關因爲如果我刪除 - cloudzoom將在fancybox中工作 - 不幸的是，這意味着它可以在我的主頁上看到，然後打開覆蓋fancybox，這打破了目的。

這似乎是一個常見的問題，因爲我發現這個問題的其他三個版本的SO，但不幸的是，他們沒有得到答覆...

所以，我有兩個網頁運行 - 先用cloudzoom的工作，因爲在div可見 （點擊第一個作品「Auzie的屁股」，看的fancybox/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：所以，我能夠得到這個使用這個工作，不知道這是最好的辦法：

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

與此HTML：

<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取決於瀏覽器中不可見的對象所提供的數據。因此，您需要在cloudcybox打開後調用cloudzoom，然後才能看到並能夠正常工作。

我注意到你實際上並沒有在任何地方調用fancybox，而只是使用class="fancybox"約定來創建彈出窗口。因此，我們將要建立的fancybox調用cloudzoom這樣的：

$(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();，這很可能會導致問題。所以，我建議你不要使用class="fancybox"慣例，而是手動調用它，更多的東西是這樣的：

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