Publicado em 15 de out.

[Resolvido] Problema LightBox!

Opa galera beleza?

To com um problema e gostaria q voces me ajudassem, o lightbox q está implementado no meu site ele está com um problema no IE, ele abre no topo da pagina...Já no fireFox ele abre normal, no centro da tela, e gostaria de arrumar isso no IE...

Algm sabe oq pode ser???

Esse eh um poco do css do lightbox

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

Qlquer ajuda eh bem vinda!

Vlw galera!

Discussão (9)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carlos Designer· 15 de out.

Qual lightbox você usa?

O que define o posicionamento central do lightbox esta na parte do javascript!

nesse site tem uma centena de efeitos de lightbox, tenta algum outro!

http://planetozh.com/projects/lightbox-clones/

Paulo de Tarso F. M.· 15 de out.

Você modificou o CSS do Lightbox? Se sim, recomendo que baixe os arquivos originais e faça as alterações novamente. Vá testando as modificações aos poucos, e, quando alguma alteração que fizer surgir o problema atual, pronto! saberá o que está causando isso...

floopy· 15 de out.

Ola, eu uso o lightbox2.04

Nao alterei nada na css...

No firefox ele ta abrindo normalmente, no IE q ele buga!!!!!

Alguma solucao??!?!

Aprendiz CSS· 15 de out.

baixa denovo o arquivo..

se for bug eles devem ter corrigido

http://www.huddletogether.com/projects/lightbox2/

abraço

Paulo de Tarso F. M.· 15 de out.

Eu também uso o Lightbox, e não apresenta erro nenhum em nenhum browser (e olha que os meus eu modifico bastante o CSS)...

floopy· 16 de out.

Ja baixei dnovo os arquivos, substitui e nada..

IE abre no TOPO da pagina, e o firefox abre no meio ainda..

ja testei em outros computadores e está do msm jeito..

Ajuda ae galera...=\

Thammynha· 16 de out.

Olá Floopy!!

Utiliza esse aqui!!

CSS

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: none;
	}

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../imagens/exc.jpg) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../imagens/exc.jpg) 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; }

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

Baixa esse arquivo com os js ( Arquivos ) e cole isso na sua página.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
<script>
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

</script>
</head>

<body onLoad="MM_preloadImages()">

No link, coloque:

<a href="caminho/nome.jpg" rel="lightbox">Espero ter ajudado!

floopy· 16 de out.

Deu certo ^^

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Obrigadooo! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Thammynha· 16 de out.

de nada Floopy!!!

http://forum.imasters.com.br/public/style_emoticons/default/grin.gif