jQuery / Revisitando eventos

Bienvenidos sean a este post, hoy solo haremos un repaso de los eventos.

Para ello crearemos un nuevo proyecto donde mostraremos una galeria de imagenes con algunos eventos sobre las mismas, para este caso les voy a pasar la base del proyecto:

En un directorio extraigan todo el contenido que seran la pagina principal, el archivo con los estilos que aplicaremos, luego un directorio con las paginas que uttilizaremos y por ultimo otro directorio con imagenes, su estructura sera como la siguiente:

.

├── estilo.css
├── galeria.html
├── img
│   ├── c-01.jpg
│   ├── c-02.webp
│   ├── c-03.jpg
│   ├── c-04.jpg
│   ├── cthulhu.jpg
│   ├── d-01.webp
│   ├── d-02.jpg
│   ├── d-03.jpg
│   ├── d-04.jpg
│   ├── Dagon.webp
│   ├── n-01.jpg
│   ├── n-02.jpg
│   ├── n-03.jpg
│   ├── n-04.webp
│   ├── nyarlathotep.jpg
│   ├── s-01.jpg
│   ├── s-02.jpg
│   ├── s-03.jpg
│   └── Shoggoth.webp
└── pages
    ├── 1.html
    ├── 2.html
    ├── 3.html
    └── 4.html

Con esto realizado nuestro siguiente paso sera crear un nuevo archivo en la raiz del directorio con el nombre codigo.js y le agregaremos el siguiente codigo:

codigo.js

$(document).ready(function() {
	var numPag = 1;
	$('#mas-fotos').click(function(ev) {
		ev.preventDefault();
		var $link = $(this);
		var url = $link.attr('href');
		if (url) {
			$.get(url, function(datos) {
				$('#galeria').append(datos);
			});
			numPag++;
			if (numPag < 5) {
				$link.attr('href','pages/' + numPag + '.html');
			}
			else {
				$link.remove();
			}
		}
	});
});

Primero definiremos una variable con un valor inicial, ya veremos para que, despues asociaremos el evento click al link mas-fotos, en este caso primero usremos este metodo para evitar que el link haga su conducta normal, despues definiremos un objeto para contener el elemento seleccionado, lo siguiente sera definir otro donde almacenaremos el valor del atributo href, despues tenemos un condicional donde evaluammos si el objeto anterior tiene un valor, en caso de ser verdadero obtendremos el valor de url, este lo pasaremos a otra variable y por medio de append lo agregaremos al div identifficado como galeria, una vez hecho esto incrementaremos el valor de la variable inicial, nuestro siguiente paso sera verifficar que la variable sea menor a cinco, en caso de ser verdadero establecermos un nuevo valor al atributo href, en este caso utilizamos el valor de la variable numPag como el nombre del proximo archivo, por ultimo cuando no se cumpla la condicion procedemos a remover el link, veamos como trabaja nuestra pagina

Como pueden ver la pagina a medida que presionamos el link va agregando mas fotos en la pagina y una vez alcanzado el limite removemos el link, si bien no lo vimos cada foto en cada una de la paginas tiene una descripcion y una fecha, la primera es para indicar cuando aparecio la primera vez y la fecha de publiccacion del relato, para ello volveremos al archivo codigo.js y agregaremos el siguiente ccodigo:

$(document).ready(function() {
	$('div.foto').on('mouseenter mouseleave', function(ev) {
		var $detalles = $(this).find('.detalles');
		if (ev.type == 'mouseenter') {
			$detalles.fadeTo('fast',0.7);
		} else {
			$detalles.fadeOut('fast');
		}
	});
});

Aqui agregaremos dos eventos a la foto, uno para cuando estamos sobre la imagen (mouseenter) y otro para cuando salimos de esta (mouseleave) lo primero que haremos sera definir un objeto que contendra los elementos que posean la clase detalles, si la buscan en el archivo estilo.css veran que esta clase oculta el elemento en cuestion, despues tenemos un condicional donde verificamos si el tipo de evento es mouseenter procede a mostrarlo por medio del fadeTo y en caso contrario procede a ocultarlo, si lo prrobamos ahora funcionara de la siguiente forma

En este caso vemos como al momento de pasar sobre alguna de las cuatro imagenes se muestra una bree descripcion de la imagen, pero tendremos un inconveniente que no se ve en el video porque a los elementos que agregaremos mediante el link no se asociaran con los nuevos dos eventos, un poco sobre esto vimos en este post, pero sobre esto ahondaremos en el proximo post pero antes de finalizar debo comentarles que para poder utilizar este ejemplo necesitan de un servidor web, en caso de no poseerloo le voy a dear dos posts sobre este tema, el primero es:

En este les comento como instalar un pc virtual con un linux debian, el siguiente post es:

Este es para instalar un Apache en un equipo con debian, se los sugiero de esta formma porque asi no ponen en riesgo su euipo y solo necesita 1 GB de RAM y un poco de espacio en el disco, y en caso de no necesitarlo mas solamente borran el euipo y listo, esto debe hacerse porque al usar Ajax (el metodo append) no funciona sino esta desde un servidor, con esto comentado les dejo los archivos que utilizamos y creamos en este post:

En resumen, hoy hemos revisitado a los eventos, en este caso vimos primero al click y luego cuando el cursor esta sobre o fuera de un elemento, tambien hemos establecido la base del ejemplo que usaremos en elos proximos posts, y por el momento nos hemos quedado con un inconveniente pero que lo veremos en el proximo post, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.