Tarea #14: Galería lightbox [opcional]

Publicado en Prácticas

Después de realizar las tareas propuestas en Photoshop podemos ordenar nuestras imágenes para que se muestren en galería, como en muchas de las páginas web que estamos acostumbrados a visitar.

De momento, y hasta que estudies como funcionan las tecnologías Web (en el próximo curso), realizar esta galería es muy fácil siguiendo estos sencillos pasos:

Crea una carpeta llamada [galeria] y dentro otras dos: una llamada [css] y otra llamada [img].
Crea un archivo de texto, dentro de [galeria], llamado index.html y copia el código del Tab llamado "Código HTML".
Crea un archivo de texto, dentro de [galeria/css], llamado estilos.css y copia el código del Tab llamado "Código CSS".
Copia todas tus imágenes dentro de la carpeta [img]. Recuerda que las hay de dos tipos: unas pequeñas en formato .png, y otras grandes en formato .jpg.
En el archivo index.html quita la primera barra (/) que hay en los atributos "src" y "href".
En el archivo index.html cambia los nombres de las imágenes de las etiquetas "img" por los nombres de tus imágenes.
Si todo ha salido bien, ya tendrás tu galería funcionando haciendo clic en el archivo index.html para que se muestre en cualquier navegador web.

estructura

Vista galería:

lightbox1

Vista modal, al pulsar sobre una imagen:

lightbox2

código

Código HTML


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Galería lightbox responsive solo con CSS">
    <meta name="author" content="(cc) 3con14" />
    <title>Galería</title>
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>
  <h3>Galería de imágenes lightbox <br>responsive solo con CSS</h3>

  <div class="galeria">
    <div class="item"><a href="#img1"><img src="/img/1p.png"></a></div>
    <div class="item"><a href="#img2"><img src="/img/2p.png"></a></div>
    <div class="item"><a href="#img3"><img src="/img/3p.png"></a></div>
    <div class="item"><a href="#img4"><img src="/img/4p.png"></a></div>
  </div>
  
  <div class="modal" id="img1">
    <div class="imagen">
      <a class="ant" href="#img4"></a>
      <a href="#" title="cerrar"></a><img src="/img/1g.jpg">
      <a class="sig" href="#img2"></a>
    </div>
  </div>

  <div class="modal" id="img2">
    <div class="imagen">
      <a class="ant" href="#img1"></a>
      <a href="#" title="cerrar"></a><img src="/img/2g.jpg">
      <a class="sig" href="#img3"></a>
    </div>
  </div>

  <div class="modal" id="img3">
    <div class="imagen">
      <a class="ant" href="#img2"></a>
      <a href="#" title="cerrar"></a><img src="/img/3g.jpg">
      <a class="sig" href="#img4"></a>
    </div>
  </div>

  <div class="modal" id="img4">
    <div class="imagen">
      <a class="ant" href="#img3"></a>
      <a href="#" title="cerrar"></a><img src="/img/4g.jpg">
      <a class="sig" href="#img1"></a>
    </div>
  </div>

</main>
</body>
</html>

Código CSS


:root { --separa: 4px; }
* { 
  box-sizing: border-box;
  transition: all 0.3s;
}
html {
  font       : 16px sans-serif;
  background : steelblue;
}
h3 { text-align: center; margin: 2em; }
main {
  max-width: 800px;
  width: 98%;
  min-height: 96vh;
  margin: 2vh auto;
}
.galeria {
  max-width       : 100%;
  line-height     : 0;
  padding         : var(--separa);
  padding-right   : 0;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : space-around;
}
.item {
  padding: var(--separa);
  width: 180px;
}
.item img {
  max-width : 100%;
  height    : auto;
  opacity   : 0.4;
  outline   : 3px solid #fff;
}
.item img:hover {
  opacity : 1;
  cursor  : pointer;
}
.modal {
  display: none;
}
.modal:target {
  display          : block;
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100vw;
  height           : 100%;
  display          : flex;
  background-color : rgba(0,0,0,0.6);
}
.imagen {
  margin          : auto;
  width           : 100%;
  display         : flex;
  justify-content : center;
  align-items     : center;
}
@keyframes zoom {
  0%   { opacity: 0.2; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1);}
}
.imagen a { margin: 0 4px; }
.imagen img {
  max-width : 100%;
  width     : 80vw;
  height    : auto;
  border    : 8px solid #fff;
  animation : zoom 0.5s ease-in-out;
  position  : relative;
}
.imagen a:nth-child(2)::after {
  content       : "X";
  width         : 40px; height: 40px;
  line-height   : 40px;
  text-align    : center;
  font-size     : 2em;
  border-radius : 50%;
  border        : 2px solid hsla(0, 0%, 0%, 0.3);
  background    : hsla(0, 0%, 0%, 0.5);
  color         : hsla(0, 100%, 50%, 0.5);
  position      : absolute;
  top           : 1vh;left: 1vw;
  z-index       : 1;
}
.imagen a:nth-child(2):hover::after {
  border        : 2px solid hsla(0, 0%, 100%, 0.6);
}
.imagen a:nth-child(2) {
  margin : 0;
  height : 100%;
}
.ant,.sig {
  width  : 0px; height: 0px;
  border : 20px solid transparent;
}
.ant { border-right: 20px solid hsla(0, 100%, 100%, 0.8); }
.sig { border-left: 20px solid hsla(0, 100%, 100%, 0.8); }
.ant:hover { border-right: 20px solid hsla(0, 100%, 50%, 0.8); }
.sig:hover { border-left: 20px solid hsla(0, 100%, 50%, 0.8); }

Etiquetas: Práctica, Imagen Digital

Imprimir