Vamos a empezar esta lección resolviendo el #jChallenge de la lección anterior, si recuerdas te pedimos que agregaras la imagen clickeada al overlay, si lo lograste Felicitaciones!, de todas maneras te mostraremos como lo hicimos nosotros, o aún mejor, tal vez tu encontraste una mejor manera que la nuestra, en caso de que no lo hayas podido hacer no te preocupes, estamos aprendiendo. Lo primero que vamos a hacer es crear un nuevo objeto jQuery que contendrá la imagen:

Es momento de comenzar a desarrollar la funcionalidad de la galería, si ya hechas un vistazo a nuestro plan (está al final de la lección anterior), verás que lo primero que queremos hacer es capturar el evento del click, una vez un usuario haga click en una imagen luego necesitamos capturar ese evento y comenzar a realizar los pasos siguientes de la funcionalidad, para esta lección siempre mantén abierta la documentación de jQuery, así podrás ver la documentación de los métodos que vamos a usar.

Ahora que sabemos toda la teoría detrás de jQuery es tiempo de ensuciarnos las manos, es decir, de poner en práctica toda esa teoría. Durante el resto de este curso estaremos creando algunas funcionalidades de ejemplo desde cero. Esta vez crearemos una galería de imágenes, queremos que cada imagen se abra en un overlay para una mejor experiencia de usuario en vez de abrir la imagen en otra página o pestaña del navegador. Primero que todo preparemos nuestro workspace:

Páginas

Mejora tus capacidades

Con un email a la semana, suscríbete hoy!