CloudZoom with Fancybox

Question

I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.

I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/

I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.

If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH

Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:

    $j('a[rel=gallery]').fancybox({ 
    padding: 0,
    overlayColor: '#'+$j('#skin_color').val(), 
    transitionIn: 'fade',
    transitionOut: 'fade',
    overlayOpacity: .9,
    onComplete    :   function(arg) {
        $('#fancybox-img').wrap(
         $('<a>')
         .attr('href', $(arg[0]).attr('href'))
         .addClass('cloud-zoom')
         .attr('rel', "position: 'inside'")
    );
    $('.cloud-zoom').CloudZoom();
}
}); 

Any an all help is greatly appreciated!

Edit: Got it working by changing

$(arg[0]).attr('href') 

to

this.href

As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.

Answer 1

If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like

<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
 <img id="fancybox-img" src="{big image}" alt=" " />
</a>

... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :

'onComplete' : function(){
  $('#fancybox-img').wrap(
    $('<a />')
     .attr('href', this.href) // this.href gets the "href" of the current image
     .addClass('cloud-zoom')
     .attr('rel', "position: 'inside'")
    ); // wrap
  $('.cloud-zoom').CloudZoom();
} // onComplete

(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)

SIDE NOTES:

1. You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.

2. You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4

3. Set all your fancybox API options between quotes like

   "padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
   "overlayColor": '#'+$j('#skin_color').val(),  
   "transitionIn": 'fade',
   "transitionOut": 'fade',
   "overlayOpacity": .9,
   "onComplete": ...etc
   

   there are known issues (mostly with IE) because that (fancybox v1.3.x)