Problema con (Plug-in) Fancybox y Método load()

#1 (**permalink**) 12/08/2010, 22:34

HOLA MUCHACHOS Y GRACIAS DE ANTEMANO

Paso a explicarles mi problema:

Estoy utilizando Ajax gracias a jquery y su Metodo load()...
Para ello tengo 3 archivos html: 1 que hace la llamada y los otros 2 que estan en espera del llamado para cargarse...

ESO LO LOGRO CON EL SIGUIENTE CODIGO
-------------------------------------------------------

Código:

<script type="text/javascript">
$(document).ready(function() {
	
	
	$('#nav a').click(function() {
    	var url=$(this).attr('href');
    	$('#content').load(url);
    	return false;
    });
	
});

</script>

Los 2 html que son llamados, contienen plugins jquery, para ser mas
precisos... el plugin FANCYBOX (fancybox.net) y problema reside cuando
hago las llamadas a estos 2 html externos...

------------------------------------------------------
Y ASI EJECUTO FANCY BOX EN LOS HTML EXTERNOS
------------------------------------------------------------------------------------------------------

Código HTML:

<link type="text/css" rel="stylesheet" href="css/jquery.fancybox-1.3.1.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript">

$("a#example01").fancybox({
'titleShow'	 : false,
'transitionIn'	: 'elastic',
'transitionOut'	: 'elastic'
});

</script>

------------------------------------------------------------------------------------------------

FUNCIONA TODO CORRECTO (siempre carga el html )
PERO ...SOLAMENTE FUNCIONA UNA VEZ EL PLUG-IN ...
SOLO LA PRIMERA VEZZZZZZZZZ... QUE CARGAAAAAAAAAA

POR FAVOR AYÚDENME, NO ENCUENTRO RESPUESTA...
ME PARECE MUY RARO ...

Pueden verlo en vivo aqui: http://impactoperu.com/LS_IMPACTO/@fancy_menu.html

MUCHAS GRACIAS

kokoou · #2 (**permalink**) 13/08/2010, 07:53

como ejecutas el fancyBox dentro de los html que cargas con el evento load() ?

#3 (**permalink**) 13/08/2010, 10:07

ASi ejecuto FANCYBOX en los html ecternos:

------------------------------------------------------------------------------------------------------

Código HTML:

<link type="text/css" rel="stylesheet" href="css/jquery.fancybox-1.3.1.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript">

		$("a#example01").fancybox({
			'titleShow'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
		
</script>

------------------------------------------------------------------------------------------------

kokoou · #4 (**permalink**) 18/08/2010, 06:56

Se carga solo la primera vez, porque cuando inicializas el fancyBox:

Código Javascript:

Ver original$("a#example01").fancybox({
            'titleShow'     : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
        });

Lo estás asignando a un ID específico, como el ID es único, se lo asignas al primer elemento. Puedes hacerlo por la clase de esta manera:

Código Javascript:

Ver original$("a.example01").fancybox({
            'titleShow'     : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
        });

Y los elementos <a> que ahora tienen el ID=example01, le pones class=example01 y funcionará!

#5 (**permalink**) 18/08/2010, 15:08

AMIGO ...MUCHAS GRACIAS POR TU AYUDA
PERO AUN NO FUNCIONA COMO DESEO¡¡¡

SOLO SE EJECUTA EL PLUG-IN LA PRIMERA VEZ...

SEGUÍ TUS CONSEJOS Y EL CAMBIO A CLASE DE LOS ID
PERO SIN RESULTADO...

Sin embargo me acabo de dar cuenta que Internet Explorer me muestra el siguiente error:

Y esto me aparece en FIREFOX

Firefox es un poco mas preciso y me dice que dicho error esta en la linea
16 ... pero yo no lo encuentro ...

ESTAS SON LAS PRIMERAS 20 LINEAS DE DICHO HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<title>Ajax</title>

<script type="text/javascript">
$(document).ready(function() {
	
	/*$('#content').load('home.html');*/
	$('#nav a').click(function() {
    	var url=$(this).attr('href');
    	$('#content').load(url);
    	return false;
    }); ***SUPUESTAMENTE ESTE ES EL ERROR, PERO YO LO VEO BIEN***
	
}); 

</script>
<style type="text/css">

Agradecería que me ayudes ...

kokoou · #6 (**permalink**) 19/08/2010, 09:39

De los HTML de las imagenes saca esta línea:

Código HTML:

Ver original<script type="text/javascript" src="js/jquery.js"></script>

Ese es el problema creo.

sanchezsuarezjm · #7 (**permalink**) 25/10/2010, 16:39

Echad un ojo al siguiente tutorial de adictosAlTrabajo, ahí está la respuesta: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=iaqSpiWithJQuery