CloudZoom con Fancybox

Soy un poco nuevo en javascript, ya que, en su mayor parte, solo uso el estilo CSS al desarrollar páginas web.

Me encontré con un problema al intentar integrar Fancybox con Cloudzoom. He estado intentando seguir las instrucciones tal como se indica aquí: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/

Puedo lograr que el efecto funcione perfectamente excepto por un pequeño error: por alguna razón (todas mis imágenes están en galerías para facilitar el uso del desplazamiento a través de fancybox), el zoom solo muestra la primera imagen de la serie.

¿Si alguien pudiera ayudarme a resolver esto? Previsualice cualquiera de las galerías aquí: http://bit.ly/LaPzEH

Aquí está el tidbit que creo que está ligeramente fuera de lugar. Creo que tiene algo que ver con que la línea href en este código esté desactivada:

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

Cualquier ayuda es muy apreciada!

Edit: Lo tengo funcionando cambiando

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

a

 this.href 

Dejando de lado (porque no pude encontrar muchos hilos de cloudzoom / fancybox) también puede cambiar la posición de adentro a derecha / izquierda, etc. editando el código JS para que fancybox tenga la pantalla interna de fancybox como visible en lugar de oculta.

Si la idea es envolver el #fancybox-img con un ancla con class="cloud-zoom" y con el mismo atributo href del ancla que abrió fancybox como

     

… así que Cloud Zoom puede funcionar en la imagen específica, luego reescribiría la onComplete llamada onComplete como:

 'onComplete' : function(){ $('#fancybox-img').wrap( $('') .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 

(No onComplete : function(arg) idea de lo que onComplete : function(arg) , pero en cualquier caso sería mejor usar 'onComplete' : function(currentArray, currentIndex) por el bien del código de fancybox estándar)

NOTAS LATERALES :

  1. Está cargando dos versiones de jQuery (1.4.2 y 1.7.1) cuando en realidad necesita una sola instancia (idealmente la última versión) para evitar errores inesperados.

  2. Está utilizando fancybox v1.3.0 … no estaría mal actualizar al menos a v1.3.4

  3. Establezca todas sus opciones de API de fancybox entre comillas como

     "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 

    hay problemas conocidos (principalmente con IE) porque (fancybox v1.3.x)