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