Iniciación a HTML y jQuery

Todo sobre lenguajes de programación, IDEs, lenguajes de bases de datos, HTML, etc.
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

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

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>
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

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 :)
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

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

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 ;)
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

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...
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

Ah vale vale, lo pillo

¿A por que vamos ahora? :P
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

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)
Adjuntos
reto06.jpg
reto06.jpg (28.29 KiB) Visto 5749 veces
Responder