Question

I’m losing my mind here. I have a conflict getting cloud zoom to work within fancybox. I’ve narrowed it down to having something to do with my #fancyboxContent style being set “display:none;” because if I remove that – cloudzoom will work in fancybox – unfortunately, that means it’s visible on my main page BEFORE I open an overlay fancybox, which defeats the purpose.

This seems to be a common issue, because I’ve found three other versions of this question on SO, but unfortunately, they have gone unanswered…

So, I’ve got two pages running – the first with cloudzoom working, because the div is visible
(Click on the first painting “Auzie’s Ass” to see fancybox/cloudzoom working:
http://test.fatcat-studios.com/RnR/art_kelly_dodge2.html

Here’s the page looking as it should, with the fancybox div hidden, but if you click on “Auzie’s Ass” (I didn’t name it!) then you’ll see the fanycbox open, but no zoom functionality:
http://test.fatcat-studios.com/RnR/art_kelly_dodge.html

Any ideas? I’m on deadline and pulling my hair out!!
This seems to be the code that’s at issue, but I can’t see why!

<style>
    div#FancyboxContent {
        display:inherit;
    }
</style>

Thanks!

UPDATE:
FYI: So, I was able to get this to work using this, not sure it’s the best way:

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

with this 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>

It can be seen here: test.fatcat-studios.com/RnR/fancybox/index2.html

Thanks so much!!

Answer 1

The reason you are having a problem is that cloudzoom like many scripts depends on data from the browser that is not available with invisible objects. So you you need to call cloudzoom AFTER fancybox has opened, it will then be visible and able to work.

I noticed that you are not actually calling fancybox anywhere, but rather just using the class="fancybox" convention to make the popup. So we will have to setup fancybox to call cloudzoom like this:

 $(document).ready(function () {
      $.fancybox({
           onComplete : function(){
               $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
           }
      });
 });

also I noticed you are including cloud-zoom.1.0.2.js and could-zoom.1.0.2.min.js in your document, please remove one of them as it might cause problems.

Another problem you may run into with this, is if you have more than one fancybox with cloud-zoom content, this script will run .CloudZoom(); again, which is likely to cause problems. So I suggest you not use the class="fancybox" convention and instead call it manually, something more like this:

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