Fancybox de jquery a través de AJAX

[vicfebo]

Hola,

Acabo de probar el fancybox de jquery y funciona de maravilla (http://fancybox.net/).
Pero cuando lo utilizo a través de una llamada ajax ya no funciona. Alguién sabe como resolver esto?

Me explico, si yo utilizo fancybox en un fichero index.php, funciona perfecto. Pero si el index.php hace una petición ajax a un fichero ajax.php y éste es el que devuelve el fancybox. Entonces ya no funciona.

Es acaso incompatible fancybox con este tipo de peticiones asincronas?

Gracias y saludos!!

[Luisus]

Hola qué tal amigo.

Este tema es muy viejo pero mi problema era el mismo que el tuyo y tardé demasiado en dar con la solución. Aparte es de los primeros resultados en Google así que aquí va cómo lo resolví:

El problema radica en que uno modifica el contenido de la página con AJAX por lo que el fancybox ya no funciona. Esto se soluciona echando a andar fancybox de nuevo para que reconozco los cambios hechos en la página.


Supongamos que la parte que ejecuta los cambios en AJAX es esta, los cambios deben ser así:

Código:

if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
        // Aquí van todos los scripts que modifican la página


       // Una vez hechos todos los cambios se llama un Timeout que cargue el fancybox
	setTimeout(function() 
		{
		$("a[rel=TuRelacion]").fancybox( ... ... .... Tu configuración ... .... ... .. );
		},1000);

	}

La clave es usar un Timeout, al parecer fancybox es muy rápido y no espera a que carguen las imágenes. Yo uso uno de 1 segundo, ahí ustedes muévanle al que más se les acomode.

Una vez hecho esto, todo funcionará mágicamente.



¡Saludos y felices códigos!

[BolaOcho]

Gracias!... unque no le entendi muy bien a tu respuesta me dio la base para saber por donde buscarle... efectivamente, se tiene que volver a cargar el fancy box... yo le hice asi...

if (ajax.readyState==4) {
divMostrar.innerHTML = ajax.responseText;
divMostrar.style.display="block";
document.getElementById("cargando").style.display= "none";
$(document).ready(function(){
$("a#dibujo").fancybox();
});
}

[edualfio]

Luisus,

Muchísimas gracias! Llevo un día de trabajo perdido por este asunto y justo me has salvado! Yo hacia una carga desde otra pagina (html normal, ni JSON ni XML) de mi servidor por ajax y jquery, pero no terminaba de asociar los rel que les asignaba con las imágenes externas

Pensaba que Fancybox no leia los elementos que añadía al DOM en la función anterior, y resulta que era cuestión de precocidad!

Gracias de nuevo!