Modal automático

[Ícarus Costa 0]

Iae imasters, então eu fiz uma galeria em css+html+jquery, ta tudo certo eu clico e aparece o modal da imagem. Qual a dúvida? É como eu faço pra fazer isso de modo automático?

 

Já agradeço qualquer ajuda.

 

segue abaixo o script:

 

$(document).ready(function(){
	var item, img, title, large_img;
	var CW, CH, CL, CT, hpadding, vpadding, imgtag;
	//Bandeira para a prevenção de exposições de imagens múltiplas
	var lb_loading = false;
	var doc = $(document);
	
	$("#lightbox li").click(function(){
		if(lb_loading) return false;
		lb_loading= true;
		
		item = $(this);
		img = item.find("img");
		title = item.find(".title").html();
		
		// Remover classe ativa de LI clicada anteriormente
		$("#lightbox li.active").removeClass("active");
		// Marque a LI clicado como ativo para uso posterior
		item.addClass("active");
		
		//A imagem grande
		large_img = new Image();
		// O uso de dados grande ou a si mesmo se src url grande imagem não está disponível
		large_img.src = img.attr("data-large") ? img.attr("data-large") : img.attr("src");
		
		// Adicionando HTML adicional - apenas se não tiver sido adicionada antes
		if($(".lb_backdrop").length < 1)
		{
			var lb_backdrop = '<div class="lb_backdrop"></div>';
			var lb_canvas = '<div class="lb_canvas"></div>';
			var lb_previous = '<span class="lb_previous"><</span>';
			var lb_title = '<span class="lb_title"></span>';
			var lb_next = '<span class="lb_next">></span>';
			var lb_controls = '<div class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
			var total_html = lb_backdrop+lb_canvas+lb_controls;
			
			$(total_html).appendTo("body");
		}
		// Fade em elementos lightbox se eles estão escondidos devido a uma saída anterior
		if($(".lb_backdrop:visible").length == 0)
		{
			$(".lb_backdrop, .lb_canvas, .lb_controls").fadeIn("slow");
		}
		
		//Display preloader até as cargas grandes de imagem e fazer a imagem anterior translúcido para que o carregador no BG é visível
		if(!large_img.complete) 
			$(".lb_canvas").addClass("loading").children().css("opacity", "0.5")
		
		// Desativação esquerda / direita controles primeira / última itens
		if(item.prev().length == 0)
			$(".lb_previous").addClass("inactive");
		else
			$(".lb_previous").removeClass("inactive");
		if(item.next().length == 0)
			$(".lb_next").addClass("inactive");
		else
			$(".lb_next").removeClass("inactive");
		
		//Centralização. Lb_canvas
		CW = $(".lb_canvas").outerWidth();
		CH = $(".lb_canvas").outerHeight();
		//coordenadas superior e esquerda
		CL = ($(window).width() - CW)/2;
		CT = ($(window).height() - CH)/2;
		$(".lb_canvas").css({top: CT, left: CL});
		
		// Inserir a imagem grande em lb_canvas. Uma vez que é carregado
		$(large_img).load(function(){
			// Recentramento. Lb_canvas com novas dimensões
			CW = large_img.width;
			CH = large_img.height;
			//. estofamento lb_canvas a ser adicionado à largura da imagem altura para obter as dimensões totais
			hpadding = parseInt($(".lb_canvas").css("paddingLeft")) + parseInt($(".lb_canvas").css("paddingRight"));
			vpadding = parseInt($(".lb_canvas").css("paddingTop")) + parseInt($(".lb_canvas").css("paddingBottom"));
			CL = ($(window).width() - CW - hpadding)/2;
			CT = ($(window).height() - CH - vpadding)/2;
			
			// Animando . Lb_canvas para dimentions novos e posição Animando. Lb_canvas para dimentions novos e posição
			$(".lb_canvas").html("").animate({width: CW, height: CH, top: CT, left: CL}, 500, function(){
				// Inserir a imagem, mas mantendo-o escondido
				imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
				$(".lb_canvas").html(imgtag);
				$(".lb_canvas img").fadeTo("slow", 1);
				// Exibindo o título da imagem
				$(".lb_title").html(title);
				
				lb_loading= false;
				$(".lb_canvas").removeClass("loading");
			})
		})
	})
	
	// Clique navegação baseado em
	doc.on("click", ".lb_previous", function(){ navigate(-1) });
	doc.on("click", ".lb_next", function(){ navigate(1) });
	doc.on("click", ".lb_backdrop", function(){ navigate(0) });
	
	// Teclado navegação baseado em
	doc.keyup(function(e){
		// Teclado de navegação deve funcionar somente se luz está ativo, o que significa cenário é visível.
		if($(".lb_backdrop:visible").length == 1)
		{
			//Esquerda
			if(e.keyCode == "37") navigate(-1);
			//Direita
			else if(e.keyCode == "39") navigate(1);
			//Esc
			else if(e.keyCode == "27") navigate(0);
		}
	});
	
	//função para navegação
	function navigate(direction)
	{
		if(direction == -1) // esquerda
			$("#lightbox li.active").prev().trigger("click");
		else if(direction == 1) //direita
			$("#lightbox li.active").next().trigger("click");
		else if(direction == 0) //saida
		{
			$("#lightbox li.active").removeClass("active");
			$(".lb_canvas").removeClass("loading");
			// Fade os elementos lightbox
			$(".lb_backdrop, .lb_canvas, .lb_controls").fadeOut("slow", function(){
				// tela vazia e título
				$(".lb_canvas, .lb_title").html("");
			})
			lb_loading= false;
		}
	}
})
	</script>

 

 

[Tiago Sabadini 3]

Como assim automático?

[Ícarus Costa 0]

Assim que carregar a página, o modal ja apareça, com a primeira imagem e depois sucessivamente !

[William Bruno 1501]

$("#lightbox li").trigger('click');

[Ícarus Costa 0]

Então William Bruno eh q eu sou leigo em jquery+javascript, to iniciando agora ao mesmo tempo desenvolvendo. Por isso eu preciso saber onde colocar essa linha de código. eu substituo por:

 

 

$(document).ready(function(){

valeu cara obrigado pela força.

[Ícarus Costa 0]

Valeu ! William Bruno pesquisei e consegui incorporar a linha!

 

\o/