Alinear Lightbox al Top

[GidHarvey]

Buenos Dias Amigos de Foros del Web.
Tengo una peque~a duda con respecto al centrado de mi lightbox en mi pagina web, lo instale anoche y no se como puedo subirlo mas al momento que carga la imagen, sucede que cuando uno quiere ver la imagen en el lightbox la muestra muy abajo y en el codigo CSS no se donde lo puedo subir mas al Top de mi pagina, alguien me podria decir donde lo tengo que modificar para que suba mas y no se abra un scroll bar? saludos.

uso mozilla firefox

aqui el link de mi pagina:

http://www.kopfmackloss.com/

aqui el codigo del CSS del lightbox 2.04:

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:image/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: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#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; }

de antemano muchas gracias, ATTe Gidharvey.

[Mikmoro]

Una solución rápida es que añadas al selector #lightbox un top:10px !important;

Para una solución definitiva, creo que deberás editar el script y buscar dónde le da la medida de top:

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

this.changeImage(imageNum);

[GidHarvey]

mikmoro, muchas gracias se soluciono mi problema, solo use la opcion de añadirle un selector

Código:

top:10px !important;

con eso me funciono, no pasara nada si no le edito el script en la medida top?

Bueno muchas gracias amigo, hay te va mi karma.

ATTe gidharvey.

[Mikmoro]

Pasará que IE6 no entiende el important, y no lo hará bien. Por eso hablaba de provisional y definitivo.

De todos modos en IE6 funciona distinto, así que igual está solucionado.

Por cierto: vaya ilustraciones: ¡qué barbaridad!. Menuda calidad.

[GidHarvey]

como lo tendria que modificar? el codigo que me diste es el que tengo que poner, no entiendo mucho de script...

Código:

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + '25px', left: lightboxLeft + 'px' }).show();

le puse eso :s que esta en negrita, espero que sea asi, si no lo modifico...

PD: muchas gracias, las ilustraciones son de mi novia, saludos.

[kseso?]

Con permiso, y para animar un poco
Lo que recuerdo (y he vuelto a ver ahora) es que el lightbox coloca la imagen con cierto margen superior respecto a la ventana (con independencia del punto donde se encuentre la imagen que lo llamas en ese momento.
Me explico: tengamos la misma imagen que lo llama y movamos el scroll para que quede arriba, al centro o abajo de la ventana del navegador, al abrirse el lightbox la sitúa con el mismo punto superior (relativo) de la ventana.

Pero si utilizas el !important ese efecto desaparece y la imagen se abre respecto al body del elemento, ya que el script crea el "<div id="lightbox"...>" como hijo directo de body.

Así que con la forma "provisional" de Mik (hola), te encontrarás que si tu imagen está muy abajo en el html, tendrás que hacer scroll hasta arriba para verla.

Por lo que dices que te lo coloca muy abajo (supongo que con respecto a la posición de la ventana) y por lo que te he comentado antes (posición respecto a body), creo que el problema puede que esté en otra parte.

Un saludo

[GidHarvey]

kseso (hola) no aparecia abajo, eso me paso al princio cuando estaba instalando el lightbox antes de colocar todos los codigos y se a lo que te refieres, se abri un scrollbar gigante hasta llegar a donde estaba la imagen, que era mas o menos donde estaba en el body.
el problema era que las imagenes son muy grandes es decir 600x720 entonces al abrir la imagen y activarse el lightbox aparecia un scrollbar, pero era porque no alcansa a quedar en toda la pantalla la parte donde sale el boton CLOSE del lightbox, entonces como las imagenes van a tener un tama~o definitivo pense que lo mejor era subir el lightbox un poco para que no saliera el scrollbar.
Estare en lo correcto? :S :$

Saludos y muchas gracias.

[kseso?]

Me refería a este efecto si utilizas el !important en páginas muy largas (height)

Un saludo

[Mikmoro]

Me parece que no has entendido a kseso?, GidHarvey. Te explico:
el lightbox siempre saca la imagen con un cierto margen superior con respecto a la pantalla que estás viendo, lo que significa que si, imagina que has colocado una imagen de miniatura en la parte de abajo de tu página, y has hecho un buen trozo de scroll para abajo para verla; pues bien, en el momento que pulses la imagen para verla ampliada, lo que interesa es que aparezca ahí mismo, donde estás de la página, no que aparezca arriba del todo de la página, lo que te obligaría a hacer scroll hacia arriba para poder verla. Por eso lightbox está hecho así y por eso su comportamiento es muy lógico.
Tú no te has percatado de esto porque todas tu imágenes están en la parte de arriba de la página, pero si tuvieras algunas en la de abajo, verías más claramente de qué te habla kseso?.

¿Qué es lo que te ocurre?, que efectivamente, tus imágenes son muy grandes, y en resoluciones pequeñas (como 1024 x 768), no cabe nunca en una sola pantalla, lo que inevitablemente hace que salga el scroll, pero sea hacia arriba o hacia abajo, el scroll deberá salir si la imagen no cabe en la pantalla.

En resumen, si no vas a tener una página más larga que ahora en vertical y nunca habrá imágenes ampliables en la parte de abajo tras mucho scroll, usa la solución que te he planteado con el !important; si vas a tener ese gran scroll vertical en tu página porque será muy larga, y habrá imágenes ampliables en la parte de abajo, deja el lightbox como está.

Es mi opinión, claro.

[GidHarvey]

ahora entiendo a lo que se referia, muchas gracias por explicar eso, ya que al momento de tener una pagina con un gran scroll sirve de ayuda para que no modifiquen el lightbox, pero ahora como mi pagina es solo de ese tama~o y no va a cambiar, me sirvio lo del !important, tendre encuenta todas las explicaciones, todos los dias se aprende algo nuevo, saludos y muchas gracias a los dos.
que tengan una buena semana

ATTe Gidharvey.

[Mikmoro]

De nada, es un placer.

Saludos.

[kseso?]

Como sabía que mi explicación teórica no había quedado nada clara, monté el ejemplo que te ponía:

Iniciado por kseso?

Me refería a este efecto si utilizas el !important en páginas muy largas (height)

Pero como siempre, y siempre se agradece, estuvo al quite Mik para cubrir mis lagunas.

Pero las gracias a tí, Gidharvey, por darnos un "juguete" de los que nos encantan. ¿Verdad Mik?

Un saludo

[Mikmoro]

Iniciado por kseso?

Pero las gracias a tí, Gidharvey, por darnos un "juguete" de los que nos encantan. ¿Verdad Mik?

¡Cómo lo sabes!

El ejemplo estaba muy claro, pero a veces, si no entiendes la explicación, el ejemplo parece chino, y otras te lo aclara por completo.