JMiur [E]

CSS3 Lightbox es una fantástica idea de codrops que hace uso de la pseudo-clase target por lo tanto, no funcionará en versiones anteriores a IE9 pero, de todos modos, vale la pena investigar porque permite crear algo así como una ventana modal para mostrar imágenes, son bastante sencillez.

Acá, me he limitado a "destruir" un poco el código de tal modo de hacerlo independiente pero, los demos originales pueden ser descargados del sitio del desarrollador y entendiéndolos, se puede jugar con diseños personales o estructuras diferentes.


Básicamente, en este ejemplo, el HTML es el mismo que muestran en sus demos aunque le puse otros nombres a las clases para no confundirme; en lugar de usar una lista, como no quiero crear un álbum sino tener la posibilidad de mostrar esa ventana modal en cualquier circunstancia, uso un DIV:
<div class="vmcc3" id="ejemplo-1">
  <!-- la miniatura visible -->
  <a href="#image-1">
    <img src="URL_miniatura" />
  </a>
  <!-- la imagen completa oculta -->
  <div class="vmoverlay" id="image-1">
    <img src="URL_imagen" />
    <a href="#ejemplo-1" class="vmcerrar">cerrar</a>
  </div>
</div>
Alojando las imágenes en Picasa es bastante sencillo tener las dos direcciones URLs, la de la miniatura y la de la imagen completa.

El único detalle a tener en cuenta al crear el HTML es el ID que debe ser único (no repetido) y que se coloca en el DIV oculto y al que se debe hacer referencia en el enlace de la miniatura, anteponiéndole el carácter # ya que eso es l oque hará que funcione la pseudo-clase target.

A esto, le agregué otro ID al DIV contenedor que se utiliza en el enlace CERRAR para evitar que la página se desplazara demasiado; es algo que hay que perfeccionar y ver alternativas.


Y ahora el CSS que incluye animaciones varias:
<style>
  /* el contenedor */
  .vmcc3 {
    display: inline-block;
    position: relative;
  }
  .vmcc3 > a, .vmcc3 > a img {display: block;}
  .vmcc3 > a {position: relative;}
  /* el div oculto donde se mostrará la imagen completa y ocupará toda la pantalla */
  .vmoverlay{
    background-color: rgba(0, 0, 0, 0.9);
    height: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    width: 0;
    z-index: 99;
  }
  /* el enlace para cerrar la ventana modal es un texto pero puede ser una imagen */
  .vmoverlay a.vmcerrar {
    color: #FFF;
    font-size: 20px;
    left: 50%;
    line-height: 26px;
    margin-left: -25px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 70px;
    z-index: 1001;
    -moz-transition: opacity 0.3s linear 1.2s;
    -webkit-transition: opacity 0.3s linear 1.2s;
    -o-transition: opacity 0.3s linear 1.2s;
    -ms-transition: opacity 0.3s linear 1.2s;
    transition: opacity 0.3s linear 1.2s;
  }
  /* la imagen de tamaño completo */
  .vmoverlay img {
    max-height: 100%;
    position: relative;
  }
  /* la pseudo-clase es la que abrirá la ventana modal */
  .vmoverlay:target {
    bottom: 0;
    height: auto;
    padding-top: 100px;
    right: 0;
    width: auto;
  }
  /* las animaciones */
  .vmoverlay:target img {
    -moz-animation: fadeInScale 1.2s ease-in-out;
    -webkit-animation: fadeInScale 1.2s ease-in-out;
    -o-animation: fadeInScale 1.2s ease-in-out;
    -ms-animation: fadeInScale 1.2s ease-in-out;
    animation: fadeInScale 1.2s ease-in-out;
  }
  .vmoverlay:target a.vmcerrar { opacity: 1;}
  @-webkit-keyframes fadeInScale {
    0% { -webkit-transform: scale(0.6); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
  }
  @-moz-keyframes fadeInScale {
    0% { -moz-transform: scale(0.6); opacity: 0; }
    100% { -moz-transform: scale(1); opacity: 1; }
  }
  @-o-keyframes fadeInScale {
    0% { -o-transform: scale(0.6); opacity: 0; }
    100% { -o-transform: scale(1); opacity: 1; }
  }
@-ms-keyframes fadeInScale {
    0% { -ms-transform: scale(0.6); opacity: 0; }
    100% { -ms-transform: scale(1); opacity: 1; }
  }
  @keyframes fadeInScale {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>
En el demo original podrán ver muchas más alternativas tales como agregar títulos y textos así que parecería que todo se reduce a ir probando y viendo que sale:

6 comentarios:

Marcos Cousseau  

fantástico!

Responder
Graciela  

Probaré Jmiur :P

Responder
Adrián J. Messina  

¡Lujoso! Realmente maravilloso, me apasionan estos logros con CSS3 .
Más que nada porque utilizo muchas imágenes y pruebo constantemente.

Abrazo.

Responder
JMiur  

Prueben porque esto, realmente vale la pena :-)

Responder
tonyman arce  

graxias x esta ayuda q brindan

Responder
christian lopez  

Felicitaciones excelente pagina!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR