Question

我在这里失去理智。我有一个冲突让云变焦在fancybox中工作。我把它缩小到与我的#fancyboxContent样式设置“display：none;”有关。因为如果我删除它 - cloudzoom将在fancybox中工作 - 不幸的是，这意味着它在我的主页面上可见，然后我打开了一个覆盖fancybox，这违背了目的。

这似乎是一个常见问题，因为我在SO上发现了这个问题的其他三个版本，但不幸的是，它们没有得到答案......

所以，我有两个页面正在运行 - 第一个用cloudzoom工作，因为div是可见的（点击第一幅画“Auzie's Ass”，看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>

谢谢！

更新：仅供参考：所以，我能够使用它来实现这一点，不确定它是最好的方式：

$("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依赖于来自浏览器的数据，这些数据不可用于不可见对象。因此，您需要在打开fancybox后调用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);
                 }
           });
      });
 });

cloudzoom与fancybox冲突？

1 个答案: