конфликт облачного зума с fancybox?

Question

Я схожу с ума здесь.У меня конфликт при получении облачного масштабирования для работы в fancybox.Я ограничил это тем, что у меня есть что-то связанное с моим стилем #fancyboxContent, установленным "display: none;"потому что, если я удаляю это - cloudzoom будет работать в fancybox - к сожалению, это означает, что он виден на моей главной странице ДО того, как я открою оверлейный fancybox, который побеждает цель.

Это, кажется, общая проблема, потому что яМы нашли еще три версии этого вопроса на SO, но, к сожалению, они остались без ответа ...

Итак, у меня запущены две страницы - первая с работающим cloudzoom, потому что div виден (Нажмите на первую картину «Задница Аузи», чтобы увидеть работу fancybox / cloudzoom: http://test.fatcat -studios.com / RnR / art_kelly_dodge2.html

Вот эта страница выглядит так, как должна, сраздел fancybox скрыт, но если вы нажмете «Задницу Аузи» (я не назвал ее!), вы увидите, что 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, он будет виден и сможет работать.

Я заметил, что вы на самом деле нигде не вызываете 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);
                 }
           });
      });
 });