Iniciación a HTML y jQuery

Xtreme · Mensaje por **Xtreme** » 10 Jul 2010 20:49

Ahora me pongo manos a la obra con ello, echale un vistazo a tus mensajes privados anda

Edito: Le he pegado un buen vistazo a esto, no veo el error que he podido cometer por ninguna parte, a ver si me pudieras ayudar...

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                 
<head>
<title></title>
<meta name="description" content="Animación en jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="show1">Mostrar</button>
<button id="hide1">Esconder</button>
<img id="foto" name="fuente" style="display: none" class='imagen' src="wall1.jpg"/>


<script type="text/javascript">
  
   NombresImg = new Array("wall1.jpg","wall2.jpg","wall3.jpg");
   var i = 0;
 
 function MostrarImg() {

	if (i<=NombresImg.length-1){
		fuente.src = NombresImg[i];
		$('#show1').click(function() {
			$("#foto").show(500, function() {
				$('#foto').hide(2500)})
			})
		}
	else {
		i=0;
		fuente.src=NombresImg[i];
		$('#show1').click(function() {
			$("#foto").show(500, function() {
				$('#foto').hide(2500)})
			})
		}
	i++;
	setTimeout('MostrarImg()',3000);
   }
   
   
   MostrarImg();
   
   $('#hide1').click(function () {
      $('.imagen').hide();
    });
   


</script>

</body>                                                                 
</html>

Mensaje por **ari0k0** » 11 Jul 2010 15:24

Buenas Xtreme, creo que el problema que tienes viene por:

Código: Seleccionar todo

	fuente.src = NombresImg[i];

cuando fuente es el "name" de la <img>.. si quieres que te funcione correctamente, accedería con:

Código: Seleccionar todo

	$("#foto").attr("src",NombresImg[i]);

Con lo que cogemos el elemento con id = foto, y en su atributo "src", le ponemos el nombre que toque. Con esto vemos otra funcionalidad de jQuery, poder acceder a los atributos de los elementos y cambiarlas. Para cambiar un atributo, basta con seleccionar el elemento con jQuery (por su id o class) y luego ".attr('atributo','valor_a_poner');"

El código, haciendo un poco de limpieza y simplificando, propondría este:

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<html>                                                                 
<head>
<title></title>
<meta name="description" content="Animación en jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<!-- agregamos la foto -->
<img id="foto"src="wall0.jpg"/> 

<script type="text/javascript">
	NombresImg = new Array("wall0.jpg","wall1.jpg","wall2.jpg"); // Añadimos todas las fotos que queramos.
	var i = 0;
	function MostrarImg() {
		// Fundido fuera de la imagen...
		$("#foto").fadeOut('slow', function () {
			// Cuando acaba el fundido, ponemos el src de la siguiente imagen...
			$("#foto").attr("src",NombresImg[i]);
			// Fundido mostrando la nueva imagen...
			$("#foto").fadeIn('slow');
		});
		i = (i + 1) % NombresImg.length; // Calculamos el próximo i = 0,1,2...
		setTimeout('MostrarImg()',5000); // Refrescamos
   }
   
   MostrarImg();
</script>

</body>                                                                 
</html>

Y ya puestos y comentando el código, aquí utilizo una función de jQuery interesante, que da un efecto muy chulo, el fadeIn (fundido apareciendo) y el fadeOut (fundido ocultando), similares a el hide y el show, pero con un efecto fundido que suele quedar estupendo.

Con estas pocas líneas tenemos un bonito SlideShow con jQuery sin necesidad de Flash

Xtreme · Mensaje por **Xtreme** » 11 Jul 2010 18:26

Suponía que andaría por el asunto de cambiar la src, pero no sabía el motivo exacto

Lo único que veo es que no has metido un if por si acaso el i se sale del rango de la array, pero supongo que lo has quitado porque simplemente es un ejemplo

Muchas gracias por todo, aunque no lo creas estoy aprendiendo bastante

Mensaje por **ari0k0** » 11 Jul 2010 18:41

El "if" para que el indice no se salga de rango, con el código que he puesto, no es necesario, verás, el truco está aquí:

Código: Seleccionar todo

 
    i = (i + 1) % NombresImg.length;

con esta operación aritmética, conseguimos incrementar el índice y luego le aplicamos el módulo (en javascript es %) con el tamaño del array. La operación aritmética del módulo, te retorna el resto de la división, si queremos que el íncide sea un número que esté entre el 0 y el 2 (0,1,2) haríamos un módulo 3... así se verá más claro:

0 módulo 3 = 0 dividido 3 = 0 + resto 0
1 módulo 3 = 1 dividido 3 = 0 + resto 1
2 módulo 3 = 2 dividido 3 = 0 + resto 2
3 módulo 3 = 3 dividido 3 = 1 + resto 0
4 módulo 3 = 4 dividido 3 = 1 + resto 1
5 módulo 3 = 5 dividido 3 = 1 + resto 2
...
15 módulo 3 = 15 dividido 3 = 5 + resto 0
16 módulo 3 = 16 dividido 3 = 5 + resto 1
...

Si te fijas, el resto siempre está entre el 0,1,2... puedes ir incrementando el índice todo lo que quieras, que siempre si le aplicas un módulo 3, el resto estará entre [0,2]

Por lo tanto con una simple línea, conseguimos que el índice, vaya incrementándose y siempre entre el 0,1,2...

Xtreme · Mensaje por **Xtreme** » 11 Jul 2010 18:50

Ah vale vale, lo pillo

¿A por que vamos ahora?

Mensaje por **ari0k0** » 11 Jul 2010 19:00

Reto 6: Crear una tabla dinámica
Una de las cosas importantes que tiene javacript, jquery y trabajar con el árbol DOM, es que puedes cambiar cosas en "caliente"... pero no solo cambiar, se puede añadir elementos nuevos y se pueden eliminar. Para añadir cosas nuevas con jQuery, se utiliza los comantos .append (añadir al final) o .html (añadir substituyendo lo que tenga) y claro está, borrar elementos con .remove.

El reto 6, podría ser, como crear una tabla dinámica, inicialmente vacía. Al clickear un botón, que añada una nueva fila (con un botón de eliminar) y al seleccionar ese botón de eliminar, elimine esa fila en concreto.

Podría quedar algo así (ver adjunto)

Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery