712 Cursos de Rails Karate Cursos de Rails Karate

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:

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

$('body').append($overlay)

Ahora que tenemos una etiqueta img vacía podemos agregarla al overlay, aunque nuestro overlay está escondido, no significa que no podamos interactuar con él:

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

Ahora sólo necesitamos actualizar $image con el atributo src que obtuvimos del href de la imagen clickeada. Ya sabemos que podemos obtener el valor de un atributo usando el método .attr(), pero ahora necesitamos añadir un atributo... Con ese método también podemos añadir atributos, echemos un vistazo a la documentación del método, en la parte final podemos ver que también podemos agregar atributos, sólo necesitamos pasar el nombre del atributo y el valor que queremos darle, esta vez antes de mostrar el overlay vamos a añadir el atributo src a la imagen con el valor de la url de la imagen clickeada.

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

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

Como puedes ver lo último que hacemos es mostrar el overlay, primero agregamos el atributo src con la ruta de la imagen clickeada. Ahora pruébalo, haz click en cualquier imagen y verás que ya podemos ver la imagen completa en el overlay, pera esta sale en una esquina, vamos a centrarla con CSS para que se vea mejor:

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display:none;
  text-align: center;
}
#overlay img {
  margin-top:10%;
}

Eso es todo!, ahora nuestra imagen está centrada, pero aún hay algo que no cuadra, una vez que clickeas una imagen y se abre el overlay no lo puedes cerrar, tienes que recargar la página para poder clickear otra imagen.

#jChallenge

Nuestro overlay parece estar bien, hacemos click en una imagen y este muestra la imagen completa centrada, pero necesitamos poder cerrarlo sin tener que recargar la página, de acuerdo a nuestro plan deberíamos poder cerrar el overlay haciendo click en cualquier parte, entonces nuestro #jChallenge consiste en que hagas que el overlay se cierre al hacer click, de esa manera si haces click en una imagen el overlay se mostrará, pero si vuelves a hacer click el overlay se cerrará y podrás hacer click en otra imagen.

Si aceptaste el reto arrójanos un tweet con el hashtag #jChallenge!

En la siguiente lección resolveremos el #jChallenge y también vamos a añadir algunas mejoras como el subtítulo de la imagen. Mantén conectado Bye bye!

Mejora tus capacidades

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