SiempreHacker
◙◙◙◙◙◙◙◙◙◙◙ஜ۩۞۩ஜ◙◙◙◙◙◙◙◙◙◙◙
█ ▓ ░ •• ☼ •• Bienvenidos! •• ☼ •• ░ ▓ █
◙◙◙◙◙◙◙◙◙◙◙ஜ۩۞۩ஜ◙◙◙◙◙◙◙◙◙◙◙

Hola invitado, si lees esto, significa que no estás Registrado.

da click en Registrarse

o conectarse si ya estas Registrado


salu2
۩۞۩SiémpreHackérs۩۞۩

TU FORO DE InFormatica

y MUCHO MAS..


Lightbox con CSS

Ver el tema anterior Ver el tema siguiente Ir abajo

Lightbox con CSS

Mensaje por ۩۞۩SiémpreHackérs۩۞۩ el Vie Oct 21, 2011 6:29 pm

ightbox es un script muy popular del cual hemos comentado en Lightbox: imágenes Emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web. Este script y otros que tienen la misma funcionalidad están basados en frameworks Javascript, esta vez crearemos el efecto Lightbox pero sin necesidad de scripts adicionales



Lightbox es un script muy popular del cual hemos comentado en Lightbox: imágenes Emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web. Este script y otros que tienen la misma funcionalidad están basados en frameworks Javascript, esta vez crearemos el efecto Lightbox pero sin necesidad de scripts adicionales.

Un poco de teoría

Esta técnica fue originalmente explicada en Create a Lightbox effect only with CSS - no javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede conseguir con dos divs, uno de los cuales servirá para obscurecer todo el contenido del web y se mostrará en el 100% de la pantalla y el segundo en donde se mostrará el contenido deseado.

Creando el Lightbox

Entonces para crear nuestro Lightbox, creamos un html en donde incluimos dos divs que utilizamos para el efecto deseado.

  1. <div id="over" class="overbox">Contenido Lightbox</div>
  2. <div id="fade" class="fadebox">&nbsp;</div>

El siguiente paso es crear los estilos para estos dos elementos, para ello creamos dos estilos: fadebox que se muestra en toda la pantalla con color de fondo negro al 80% de opacidad y overbox que se muestra en medio de la pantalla, estos dos elementos están inicialmente ocultos.

  1. .fadebox {
  2.     display: none;
  3.     position: absolute;
  4.     top: 0%;
  5.     left: 0%;
  6.     width: 100%;
  7.     height: 100%;
  8.     background-color: black;
  9.     z-index:1001;
  10.     -moz-opacity: 0.8;
  11.     opacity:.80;
  12.     filter: alpha(opacity=80);
  13. }
  14. .overbox {
  15.     display: none;
  16.     position: absolute;
  17.     top: 25%;
  18.     left: 25%;
  19.     width: 50%;
  20.     height: 50%;
  21.     z-index:1002;
  22.     overflow: auto;
  23. }

El siguiente paso es crear los botones para mostrar/ocultar el lightbox, para ello creamos dos enlaces que llamarán a dos funciones javascript, estas funciones simplemente cambiarán los estilos asociados a los dos divs para mostrarlo u ocultarlo.

  1. <a href="javascript:showLightbox();">Show LightBox</a>
  2. <a href="javascript:hideLightbox();">HideLightBox</a>

  1. function showLightbox() {
  2.     document.getElementById('over').style.display='block';
  3.     document.getElementById('fade').style.display='block';
  4. }
  5. function hideLightbox() {
  6.     document.getElementById('over').style.display='none';
  7.     document.getElementById('fade').style.display='none';
  8. }

Unimos estos elementos ya ya tenemos nuestro Lightbox funcionando, pueden ver el ejemplo funcionando en CSS Lightbox en donde hemos agregado una estilo adicional al contenido mostrado en la ventana emergente para darlo un fondo blanco, borde y margen.

Mejorando el Lightbox
Ahora esta funcionalidad es muy básica, se le podría agregar la posibilidad de definir las dimensiones de la ventana, para ello haría falta calcular el tamaño de la pantalla y según ello posicionarla. Otro de los adicionales que podríamos hacer es que cuando se haga click fuera de la ventana emergente se cierre el Lightbox, esto se hace agregando un detector de eventos para el click. Otra posibilidad es agregarle un efecto de transición al momento de mostrar la ventana.








Hola Invitado
Reglas Generales Del Foro
Reglas Generales Del Chat
Si Te Solucionamos Un Tema Pone ()
Si Aun Tienes Dudas Pone ()
!No Se Da Soporte Por MP¡

۩۞۩SiémpreHackérs۩۞۩
Admin
Admin

Sexo. : Masculino
Mensajes Mensajes : 539
Puntos Puntos : 3508
Reputación Reputación : 4

Edad Edad : 20


http://siemprehackers.foro-activo.com/

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.