Foros del Web » Creando para Internet » CSS »

Cómo se hace esto??

Estas en el tema de Cómo se hace esto?? en el foro de CSS en Foros del Web. Buenas, Realmente no sé en que sección plantear esta pregunta porque eso es lo que quiero saber. He visto por mil y una páginas esta ...
  #1 (permalink)  
Antiguo 20/06/2009, 10:22
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Cómo se hace esto??

Buenas,

Realmente no sé en que sección plantear esta pregunta porque eso es lo que quiero saber.
He visto por mil y una páginas esta forma de abrir las fotos:

http://www.wikio.es/producto/residen...n-3-69738.html

No sé si es javascript, css, supongo que las dos... no sé. Querría saber si es alguna utilidad ya hecha, porque lo veo en muchas páginas y parece el mismo.

¿¿Alguien sabe qué es??

Gracias de antemano

P.D. Si me he equivocado de sección, (que será lo más seguro), mover este tema a la sección correspondiente y pido disculpas.
  #2 (permalink)  
Antiguo 20/06/2009, 10:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo se hace esto??

busca por "lightbox"

Hay muchos "clones" del original, cada uno con sus particularidades y ventajas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/06/2009, 12:31
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Cómo se hace esto??

Muchas gracias kseso?, ya me he puesto en su búsqueda. Solo una consulta más por si la sabes.
¿Se puede implementar en html?

Gracias de nuevo!!
  #4 (permalink)  
Antiguo 20/06/2009, 12:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo se hace esto??

Sí, claro.
Si te fijas, la página que tú pusiste es un archivo html:
.../resident-evil-5-playstation-3-69738.html
Y es sencillo de implementar el lightbox. Y supongo que la mayoría de sus "parecidos/similares" serán iguales.

Si yo fui capaz de hacerlo, cualquiera puede.
Un saludo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 20/06/2009, 22:19
Avatar de EDLP  
Fecha de Ingreso: junio-2009
Ubicación: Avellaneda - Bs As.
Mensajes: 26
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Cómo se hace esto??

Yo acabo de implementar un lightbox 2.04 y anda de 10, sólo que no encuentro la manera de que al abrirse la imagen elegida, la abra en una posición más arriba, modifiqué todos los valores top, de position y de padding y nada, ahi va el css, a ver si alguien puede darme una mano de dónde tengo que mirar ya que estoy perdido

Código:
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:images/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {
	background-image: url(../images/prevlabel.gif);
	background-repeat: no-repeat;
	background-position: left 15%;
}
#nextLink:hover, #nextLink:visited:hover {
	background-image: url(../images/nextlabel.gif);
	background-repeat: no-repeat;
	background-position: right 15%;
}

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
  #6 (permalink)  
Antiguo 22/06/2009, 22:18
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Cómo se hace esto??

Cita:
Si yo fui capaz de hacerlo, cualquiera puede.
y lo bien que quedó
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #7 (permalink)  
Antiguo 26/06/2009, 18:14
Avatar de EDLP  
Fecha de Ingreso: junio-2009
Ubicación: Avellaneda - Bs As.
Mensajes: 26
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Cómo se hace esto??

Le sigo dando vueltas, no me va a ganar, espero
  #8 (permalink)  
Antiguo 26/06/2009, 18:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo se hace esto??

Hola EDLP
Creo que con css no podrás modificar la posición donde se muestra la imagen del lightbox.
Quizás necesites modificar el código de los js
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 27/06/2009, 09:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo se hace esto??

Prueba con esto:

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; top: -40px;}

O lo que quieras de positivo o negativo.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 27/06/2009, 19:56
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: Cómo se hace esto??

Un apunte:

He probado unos cuantos clones de Lightbox, pero me quedo con sexylightbox

Saludos
  #11 (permalink)  
Antiguo 30/06/2009, 18:16
Avatar de EDLP  
Fecha de Ingreso: junio-2009
Ubicación: Avellaneda - Bs As.
Mensajes: 26
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Cómo se hace esto??

Gracias con eso, ya lo pruebo a ver si doy en la tecla, la verdad que toqué todo y nada, a sí que pruebo modificar #outerImageContainer

Gracias trasgukabi por la data
  #12 (permalink)  
Antiguo 01/07/2009, 15:51
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cómo se hace esto??

Hola:

Me imagino que la posición donde se abre la imagen esté calculada en el javascript, aunque estoy seguro que la solución de Mikmoro funcionará a la perfección.

Saludos.

  #13 (permalink)  
Antiguo 01/07/2009, 17:06
Avatar de EDLP  
Fecha de Ingreso: junio-2009
Ubicación: Avellaneda - Bs As.
Mensajes: 26
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Cómo se hace esto??

Gracias Mikmoro, aprendí algo nuevo, muy buena la data.

Ahora les hago otra consulta, se puede hacer algo para que no aparezca la opción de imprimir esas imágenes que se muestran en el lightbox ???
Cómo se llama esa función para desabilitarla?
  #14 (permalink)  
Antiguo 01/07/2009, 17:36
 
Fecha de Ingreso: septiembre-2008
Mensajes: 29
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Cómo se hace esto??

Cordial saludo:

Es de mismo nombre la aplicación que adicionalmente escala el marco de las fotos según se vayan rotando...

GRACIAS
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 14:16.