title: CloudZoom with Fancybox
body: <p>I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.</p>
  
  <p>I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: <a href="http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/" rel="nofollow">http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/</a></p>
  
  <p>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.</p>
  
  <p>If someone could help me sort through this? Preview any of the galleries here: <a href="http://bit.ly/LaPzEH" rel="nofollow">http://bit.ly/LaPzEH</a></p>
  
  <p>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:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>    $j('a[rel=gallery]').fancybox({ 
      padding: 0,
      overlayColor: '#'+$j('#skin_color').val(), 
      transitionIn: 'fade',
      transitionOut: 'fade',
      overlayOpacity: .9,
      onComplete    :   function(arg) {
          $('#fancybox-img').wrap(
           $('&lt;a&gt;')
           .attr('href', $(arg[0]).attr('href'))
           .addClass('cloud-zoom')
           .attr('rel', "position: 'inside'")
      );
      $('.cloud-zoom').CloudZoom();
  }
  }); 
  </code></pre>
  
  <p>Any an all help is greatly appreciated!</p>
  
  <p>Edit: Got it working by changing</p>
  
  <pre class="lang-html prettyprint-override"><code>$(arg[0]).attr('href') 
  </code></pre>
  
  <p>to</p>
  
  <pre class="lang-html prettyprint-override"><code>this.href
  </code></pre>
  
  <p>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.</p>