849 Cursos de Rails Karate Cursos de Rails Karate

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:

Descarga algunas imágenes de internet, y súbelas a tu workspace de c9 en la carpeta client/img, renombra las imágenes con algo fácil de deletrear, una vez tus imágenes estén subidas crea un nuevo archivo html llamado overlay-gallery.html, dentro de ese archivo pega el siguiente código:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="css/overlay-style.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<title>Image Gallery</title>
</head>
<body>
	<h1>Image Gallery</h1>
	<ul>
		<li><a href="img/image1.png"><img src="img/image1.png" width="100" alt="image1"></a></li>
		<li><a href="img/image2.png"><img src="img/image2.png" width="100" alt="image2"></a></li>
		<li><a href="img/image3.png"><img src="img/image3.png" width="100" alt="image3"></a></li>
        </ul>
	<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/overlay-gallery.js" type="text/javascript" charset="utf-8"></script>
	
</body>
</html>

Como puedes ver en el código de ejemplo estamos usando 3 imágenes, pero en el vídeo es posible que usemos más, tu puedes usar la cantidad que quieras, solo asegúrate de que los links a las imágenes estén correctos, también añadimos jQuery al final del body, añadimos nuestro script con el cual vamos a crear la funcionalidad y finalmente añadimos un archivo CSS en el cual añadiremos algunos estilos básicos, crea un nuevo archivo CSS llamado overlay-style.css y pega los siguiente estilos:

body {
	font-family: sans-serif;
	background: #384047;
}
h1 {
	color: #fff;
	text-align: center
}

ul {
	list-style:none;
	margin: 0 auto;
	padding: 0;
	display: block;
	max-width: 780px;
	text-align: center;
}
ul li {
	display: inline-block;
	padding: 8px;
	background:white;
	margin:10px;
}
ul li img {
	display: block;
}
a {
	text-decoration: none;
}

Ahora visualiza el archivo html, luce mejor no? pero cuando haces click en una de las imágenes, esta se abre en una nueva página, y si quieres abrir otra imagen tienes que devolverte en el navegador, bueno esto lo podemos arreglar un overlay. Ahora crearemos el archivo Coffee llamado overlay-gallery.coffee dentro de la carpeta cf, asegúrate de que tienes corriendo el comando para compilar CoffeeScript en tu terminal. Abre el nuevo archivo CoffeeScript y añade algunos comentarios básicos sobre lo que vamos a hacer:

#Problem: When user clicks on an image it opens into a new page, user has to click back in the browser for open another image.
#Solution: Display the full image within an overlay without reload the page.

Ahora que conocemos el problema y la solución hagamos un plan:

  1. Capturar el evento click sobre una imagen:
    • Mostrar el overlay
    • Actualizar el overlay con la imagen enlazada
    • Obtener el atributo alt the la imagen y mostrar un subtítulo en el overlay
  2. Añadir overlay
    • Una imagen
    • Un subtítulo
  3. Cuando el overlay es clickeado
    • Esconder el overlay

Con nuestro workspace preparado y todo planeado estamos listos para comenzar, pero eso será para la siguiente lección, prepárate para los #jChallenge muy pronto!

Mejora tus capacidades

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