конфликт облаков с fancybox?

Question

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

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

Итак, у меня есть две страницы работает - первое с cloudzoom работы, потому что ДИВ видна (Нажмите на первой картине «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, как и многие скрипты, зависит от данных из браузера, которые недоступны для невидимых объектов. Таким образом, вам нужно позвонить в облачную среду, после того, как 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); 
       } 
      }); 
     }); 
});