1685 Cursos de Rails Karate Cursos de Rails Karate

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.

Abre el archivo overlay-gallery.coffee, allí es donde aremos toda la funcionalidad. Cómo capturamos el evento click en jQuery?, bueno, jQuery tiene un método para eso, es el método .click() , échale un vistazo a la documentación para ver cómo funciona. Antes de añadir este método primero vamos a darle un id a nuestra lista, con ese id podremos seleccionar todos los <a> dentro de nuestra lista:

<ul id="gallery">
		<li><a href="img/image1.jgp"><img src="img/image1.jpg" width="100" alt="image1"></a></li>
		<li><a href="img/image2.jpg"><img src="img/image2.jpg" width="100" alt="image2"></a></li>
		<li><a href="img/image3.jpg"><img src="img/image3.jpg" width="100" alt="image3"></a></li>
		<li><a href="img/image4.jpg"><img src="img/image4.jpg" width="100" alt="image4"></a></li>
		<li><a href="img/image5.jpg"><img src="img/image5.jpg" width="100" alt="image5"></a></li>
 </ul>

Ahora que nuestra <ul> tiene un id, será más fácil seleccionar los enlaces dentro de la lista en jQuery, comencemos:

$('#gallery a').click()

Usamos un selector #gallery a en jQuery, entonces cuando hacemos click en una imagen estamos obteniendo el evento, también podemos pasar una función anónima, dentro de esa función podemos realizar todas las operaciones que necesitamos para el overlay, ahora necesitamos obtener la URL del enlace donde hacemos click, necesitaremos obtener el valor del atributo href de enlace clickeando:

$('#gallery a').click ->
  url = $(@).attr("href")
  console.log url

Como puedes ver hemos pasado una función anónima, también seleccionamos el item clickeando usando $(@), con el signo de "arroba" obtenemos el contexto actual, en este caso, el elemento <a> que hemos clickeando, luego usamos el método .attr() para obtener el valor del atributo href del elemento clickeando, con ese método podemos obtener el valor de cualquier atributo HTML solo con pasar el nombre del atributo como una cadena. También tenemos un console.log para ver si estamos obteniendo correctamente el valor del href, si abres la galería en el navegador verás que cuando haces click sobre una de las imágenes eres redirigido a a la imagen, y si miras en la consola de JavaScript nada se ha impreso, necesitamos desactivar esta redirección, podemos hacer eso con event.preventDefault(), échale un vistazo a los ejemplos en la documentación, parece que podemos recibir el evento como argumento en la función anónima. Podemos utilizarlo para desactivar el comportamiento natural de un evento, en este caso el comportamiento natural cuando haces click en un enlace es que te redirige a la url en el href de el enlace, bueno desactivemos eso:

$('#gallery a').click (event) ->
  event.preventDefault()
  url = $(@).attr("href")
  console.log url

Ahora podemos ver que el comportamiento por defecto del evento está desacivado y podemos obtener el valor href de el link de la imagen clickeada. Si observas la consola JavaScript podrás ver que se imprime la url del enlace cada vez que hacemos click en la imagen, ahora miremos nuestro plan (el que hicimos la lección anterior). Ahora vamos a añadir el HTML de nuestro overlay, vamos a añadirlo al final del body, es el mejor lugar para añadirlo, de todas maneras no vamos a añadir directamente en el HTML, vamos a crear un objeto jQuery que va a contener el HTML de nuestro overlay:

$overlay = $('<div id="overlay"></div>')

Habrás notado que estamos usando el signo dolar en el nombre de la variable, usamos el signo dolor cuando la variable representa un objeto jQuery, esto es solo por estándar, ahora vamos a adicionar el objeto al final de nuestro elemento body

$overlay = $('<div id="overlay"></div>')
$('body').append($overlay)

Porqué lo hemos hecho de esta forma?, porque es así será más fácil interactuar con nuestro overlay, for ejemplo podemos ocultarlo o mostrarlo a nuestra conveniencia así:

$overlay = $('<div id="overlay"></div>')
$('body').append($overlay)

$('#gallery a').click (event) ->
  event.preventDefault()
  $overlay.show()
  url = $(@).attr("href")
  console.log url

Podemos manipular nuestro overlay como cualquier objeto jQuery con $overlay.show() o $overlay.hide(), de hecho hay muchísimas más cosas que podemos hacer, pero eso lo veremos pronto, ahora sólo para ver si funciona vamos a añadir algo de CSS:

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display:none;
}

Una vez haces click en la imagen verás que el overlay se muestra.

#jChallenge

En el momento estamos obteniendo el valor del atributo href de los enlaces cuando hacemos click sobre ellos, ahora como reto intenta añadir la imagen a el overlay, estamos mostrando el overlay, ahora intenta usar lo que tienes hasta ahora para "añadir" la imagen a el overlay, así cuando alguien haga click sobre una imagen este pueda visualizarla en el overlay, si aceptaste el reto entonces arrójanos un Tweet con el hashtag #jChallenge.

La siguiente lección vamos a resolver el #jChallenge y también vamos a hacer algunas mejoras al overlay. Si quieres saludar no olvides dejarnos un comentario, aquí o en youtube. Bye Bye!

Mejora tus capacidades

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