Foros del Web » Creando para Internet » CSS »

Página que se oscurece y imagen en grande

Estas en el tema de Página que se oscurece y imagen en grande en el foro de CSS en Foros del Web. Hola. Quisiera hacer el efecto que tienen muchas páginas para ampliar una imagen donde se pone la pantalla oscurecida y la imagen aparece en el ...
  #1 (permalink)  
Antiguo 06/08/2008, 16:26
Avatar de jm00092  
Fecha de Ingreso: mayo-2005
Ubicación: Ronda
Mensajes: 99
Antigüedad: 12 años, 7 meses
Puntos: 0
Información Página que se oscurece y imagen en grande

Hola. Quisiera hacer el efecto que tienen muchas páginas para ampliar una imagen donde se pone la pantalla oscurecida y la imagen aparece en el centro encima de todo lo demás.

Por ejemplo...
http://firefox-3.softonic.com/
https://addons.mozilla.org/en-US/firefox/addon/1122

(Clic en una de las imágenes de ejemplo para verlo)


Lo que necesito no hace falta que sea tan sofisticado, sin efectos de transición ni nada. Quisiera que cuando le den a la imagen en miniatura se oscurezca la pantalla y salga la grande en el centro., y despues cuando hagan clic en la grande, desaparezca y se quede la página como estaba.

He probado con capas transparentes y no lo cubren todo, o la imagen también se ve transparente, no sé cual javascript usar para seleccionar la imagen... todo va fallando. A ver si hay algún ejemplo que ya esté hecho. GRACIAS
  #2 (permalink)  
Antiguo 06/08/2008, 17:14
Avatar de K-Yezaad  
Fecha de Ingreso: octubre-2005
Mensajes: 140
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: Página que se oscurece y imagen en grande

Quiero aclarar que no he podido probar esto, pero en teoria deberia funcionar:

1.Para oscurecer todo es necesario un div que abarque toda la pagina y que este en fixed para que al hacer scroll se quede alli:
Código:
#contenedor{
background:#000;
/*Este atributo nos dice que tan transparente es nuestro div negro. 
Solo funciona en Firefox, pero creo que hay un equivalente en IE*/
opacity:0.7;
position:fixed;
top:0; left:0;
height: 100%;
width: 100%;
}
2. Con esto tendrias un"velo" que oscurece la pagina, ahora necesitas centrar tu imagen dentro. Aqui se usaria posicion absoluta:
Código:
#contenedor img{
/*Esto nos crea un marco de 5 pixeles, es opcional*/
background:#fff; padding: 5px;

position:absolute;
top: 50%; left: 50%;

/*Ojo con estos valores, aqui pones el alto y ancho de tu imagen,  
y despues le pones la mitad de cada valor como margen negativo... 
¿porque? porque al ponerle top y left en 50%, la esquina superior izquierda 
queda en el exacto centro de la pagina, asi que 
hay que mover la imagen arriba y a la izquierda para ajustarla bien*/
height: 300px;
width: 200px;
margin-top: -150px;
margin-left: -100px;
}
3. Con javascript lo que harias seria crear una funcion que esconda o muestre ese contendor con todo e imagen
Código:
function ocultar(divId){
	var obj = document.getElementById(divId);
	if(obj.style.display == 'block'){
		obj.style.display = 'none';
	}else{
		 obj.style.display = 'block';
	}
}
4. Y lo que tendrias que hacer seria crear dos botones que tuvieran onClick="ocultar('contendor')", uno que llame la vista previa, y otro dentro de "contendor" para ocultarla, porque cuando ese div aparezca tapara a todos los demas.

Si te funciona avisame :P
  #3 (permalink)  
Antiguo 06/08/2008, 17:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Página que se oscurece y imagen en grande

lightbox

K-Yezaad:

{filter: alpha(opacity=50); /* de 0= totalmente trasparente, a 100)*/
-moz-opacity: 0.5; /* de 0 a 1, 0= totalmente trasparente*/
opacity: 0.5;} /*idem*/
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 07/08/2008 a las 15:24 Razón: ampliar
  #4 (permalink)  
Antiguo 07/08/2008, 14:03
Avatar de jm00092  
Fecha de Ingreso: mayo-2005
Ubicación: Ronda
Mensajes: 99
Antigüedad: 12 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Página que se oscurece y imagen en grande

Muchas gracias por vuestras respuestas tan rápidas y acertadas

K-Yezaad
He probado el código y parece que le falta algo, pero de todas formas me lo quedo como guía para otras cosas.

kseso?
Pues eso se llamaba lightbox
La importancia de saber como se llaman las cosas para poder buscarlas en google sin dar tantas vueltas.
He usado uno de los javascript prefabricados que sugieren en anieto2k y ya funciona "como las de verdad" :)
  #5 (permalink)  
Antiguo 07/08/2008, 15:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Página que se oscurece y imagen en grande

Si ya lo dedía Bod Gylan en sus años mozos:
Cita:
"Man gives name to all the animals"
y detras vinieron los glosarios
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 07/08/2008, 16:24
Avatar de Erebus  
Fecha de Ingreso: junio-2008
Mensajes: 52
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Página que se oscurece y imagen en grande

Cita:
Iniciado por kseso? Ver Mensaje
lightbox



right
es muy facil adaptar lightbox para que funcione con fotos
es un poco mas entretenido hacer que funcione cuando hay objetos flash en el sitio
pero toooodavia mas entretenido cuando hay un flash video player en el sitio x)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:26.