Lightbox em jquery

[sauloviniciusf 0]

Boa tarde galera!

 

Estou com um pequeno problema kkkk, estou desenvolvendo um lightbox proprio pra um site que estou fazendo, mas estou tendo problemas com o Chrome e Safari, postarei o código abaixo (Acho que nao está muito organizado, mas dará pra entender)

 

Jquery

// Funcoes para Lightbox - Pagina de Fotos
function lightBox(){	
	
	createLightBox()
	
	setTimeout(function(){	
		
		closeLightBox();
		
		openLightBox();
			
	},0);
	
	
				
}

function createLightBox(){
	
	$("body").append('<div id="main_lightbox"></div>');
	
	setTimeout(function(){
		$("#main_lightbox").append('<div id="bg_lightbox"></div>');
		$("#main_lightbox").append('<div id="content_lightbox"></div>');
	},0);
	
	setTimeout(function(){
		$("#main_lightbox #content_lightbox").append('<a href="#" id="close_lightbox">Fechar</a>');
		$("#main_lightbox #content_lightbox").append('<div id="img_lightbox"></div>');
	},0);
	
	setTimeout(function(){
		$("#main_lightbox #content_lightbox #img_lightbox").append("<img src='' alt=''/>");
	},0);
	
}

function openLightBox(){
	$(".lightbox a").click(function(){
		
		$("#content_lightbox #img_lightbox img").attr("src",$(this).attr("href"));
			
		setTimeout(function(){
			
			positionLightBox();
			
		},0);
		
		$("#main_lightbox").stop().fadeIn(300);
		
		return false;
			
	});
}
	
function positionLightBox(){
	
//funcao para centralizar foto na pagina

	var widthLB = $("#content_lightbox img").width();
	var heightLB = $("#content_lightbox img").height();
	var widthWin = $(window).width();
	var heightWin = $(window).height();
		
	var posLeft = (widthWin-widthLB)/2;
	var posTop = (heightWin-heightLB)/2; 
		
	$("#content_lightbox").css({
		"left" : posLeft,
		"top" : posTop
	});
}

function closeLightBox(){
	
	$("#bg_lightbox, #close_lightbox").click(function(){
		$("#main_lightbox").fadeOut(200);
			
		return false;
			
	});	
}

// Evento Ready
	$(document).ready(function(){
		
		// Pagina de Fotos
		lightBox();		
	
	});
	

// Evento Resize
	$(window).resize(function(){
		
		positionLightBox();
		
	});

 

CSS

/* ---- LIGHT BOX ---- */
	
	
#main_lightbox{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	display: none;
	z-index: 1500;
}
	
#bg_lightbox{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background: #000;
	opacity: 0.6;
	z-index: 1501;	
}
	
#content_lightbox{
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	overflow: auto;
	z-index: 1502;	
}
	
#close_lightbox{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 130px;
	height: 46px;
	padding-top:10px;
	background: url(../imgs/bg_conteudo.png);
	font-family: 'Source Sans Pro';
	font-size: 24px;
	font-weight: 300;
	font-style: italic;
	color: #492121;
	text-align: center;
	z-index: 1502;
}
	

Basicamente é o seguinte:

 

Tenho uma div que contem varios links (<a></a>), a propriedade HREF deles leva o caminho da foto grande, quando clico em um deles eu altero a propriedade SRC da imagem que está na divi do lightbox, porem, em alguns momentos o programa nao consegue pegar o tamanho da imagem e retorna zero (Funcao positionLightBox())

 

Ja fucei, alterei, testei e nada... se puderem ajudar ficaria muito grato!

[Alex Hiroshi 7]

Por que esse monte de setTimeout? Não faz sentido.

Você pode tentar com javascript puro, criando uma imagem (new Image()) e usando o evento onload. Também pode usar o evento load() do jQuery ou o prop() ($('sua imagem').prop('complete')) com um if.