Lightbox es un script desarrollado con javascript que nos permite abrir ventanas emergentes con m谩s estilo que las habituales popup. Como esta librer铆a existen much铆simas mas, como por ejemplo la lightview.
Bueno pero este no es el punto principal, v铆a unijimpe me encuentro con la posibilidad de nosotros poder "desarrollar" nuestra propia lightbox. Porque por medio de css m谩s un simple mostrar y ocultar divs podemos hacer el efecto para que se abra una ventana emergente. Obviamente este c贸digo no cuenta con algunos efectos que tienen la ya nombrar lightbox, pero nos puede servir para nosotros darle el estilo que queramos a la popup que se abra.
-----------
Ahora vamos a ver el c贸digo para generar nuestra lightbox:
-----------
1 - Creamos un nuevo documento html, e insertamos estas divs.
-----------
2 - Esta paso es uno si no el mas importante de todos, vamos aplicar el estilo css a las divs que creamos en el paso anterior.
-
.fadebox {
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%;
-
height: 100%;
-
background-color: black;
-
z-index:1001;
-
-moz-opacity: 0.8;
-
opacity:.80;
-
filter: alpha(opacity=80);
-
}
-
.overbox {
-
display: none;
-
position: absolute;
-
top: 25%;
-
left: 25%;
-
width: 50%;
-
height: 50%;
-
z-index:1002;
-
overflow: auto;
-
}
-----------
3 - Ahora lo que tenemos que hacer es crear los 2 botones para mostrar y otro para ocultar la ventana. Para esto vamos a colocar el sitio c贸digo html y tambi茅n crear dos funciones javascript para que ejecuten la acci贸n de mostrar/ocultar.
-
function showLightbox() {
-
document.getElementById('over').style.display='block';
-
document.getElementById('fade').style.display='block';
-
}
-
function hideLightbox() {
-
document.getElementById('over').style.display='none';
-
document.getElementById('fade').style.display='none';
-
}
-----------
Luego de que juntemos todo este c贸digo en nuestro archivo html nos tendr铆a que quedar algo como este demo.
[...] Efecto Lightbox con css + javascriptwww.wgeek.com.ar/blog/2008/11/09/efecto-lightbox-con-css-jav… por Criogenia_oO hace pocos segundos [...]
hola e intentado hacer este efecto lightbox pero ejecutandolo no con un boton si no desde una imagen con un evento onclick pero no me funciona e copiado el codigo tal cual menos lo del boton ke e usado lo ke e dicho antes el onclick=”showLightBox()”> asi lo e hecho pero no me funciona!!!!
Esto se podria poner cuando cargue una pagina en que seccion podria ponerlo
Gustavo
- Ajax (6)
- Aplicaciones web (2)
- Color (3)
- Comunicacion (1)
- Css (10)
- Firefox (3)
- Geek (1)
- Google (1)
- Herramientas2.0 (14)
- Hosting (1)
- Humor Geek (9)
- Iconos (22)
- iPhone (1)
- JavaScript (5)
- Libros (1)
- Linux (2)
- Musica (1)
- Navegadores (3)
- Noticias (2)
- Open Source (1)
- Photoshop (17)
- PHP (1)
- Programacion (3)
- Recursos web (15)
- SEO (1)
- Series TV (2)
- Sin categor铆a (2)
- Software (2)
- Tecnologia (1)
- Wallpapers (1)
- Web 2.0 (10)
- wGeek (4)
- Wordpress (5)
- Youtube (1)
Quisiera saber como puede abrirse la ventana al ingresar al sitio?? estoy haciendo una tarjeta de navidad y quiero que se abra la ventana apenas ingresen al sitio..
Muchas gracias