Publicado em 27 de mar.

Galeria de imagens !

Olá imasters

Então pessoal, estou enfrentando um tremendo dilema, desenvolvi uma galeria de imagens com jquery. Essa galeria executa o efeito "janela modal" automático e intercalado,ou seja ,quando a pagina carrega aparece a galeria com todas as figuras, passados 10 segundos a primeira imagem é executada com o efeito "janela modal", depois de 5 segundos fecha a janela modal e abre novamente a galeria com todas as imagens, 10 segundos depois a segunda imagem da galeria é executada com o efeito modal e assim sucessivamente percorrendo a galeria de imagens.

Meu problema agora é: essas imagens não estão sendo trazidas do banco de dados, elas estão estáticas somente em html, inclusive a galeria esta sendo executada intercalada em modal por causa do creio que desta forma não consigo executar esta janela modal com imagens trazidas do banco.

O que realmente não estou conseguindo fazer é trazer imagens do banco, e faze-las executar no modal automático.

Desculpem tornar este Tópico longo, espero mesmo que me ajudem estou no aguardo !

valeu

index.php

html>

<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">

$(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;

 }
	}

	//Exibe automaticamente a janela modal(lightbox)
	var i = 1;
	setInterval(function(){

if (i<6) {
 $("#lightbox li."+i).trigger('click');
 i++;
	}else{
 i=1
	};
 setTimeout(function(){$(".lb_backdrop")

 .trigger('click',function(){ navigate(0)
});

	},10000);

	},20000)
})

	</script>

</head>
<body>
 <form action="functionRegisterPublication.php" method="post" enctype="multipart/form-data" name="registro" >
	<div id="lightbox">
	<h1>ConnectCloud</h1>
	<ul>

 <li class= "1">
 <div class="picture">
 <a href="#" class="link">
 <img src="images/2.jpg" class="image animate" data-large="images/2.jpg"/>
 <span class="blend animate">
 <strong class="head">Lorem ipsum dolor sit amet</strong>
 <span class="text">LiLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, nulla id ullamcorper consequat, urna massa pellentesque lectus, et lobortis felis tellus at lorem. Curabitur sed arcu placerat nisl mollis facilisis. Nam tempus massa elit, ut porta mi. Aenean id tempor diam. Sed nec nibh congue lacus suscipit feugiat. Integer in augue nisi, quis tristique erat. Vivamus condimentum libero in risus tincidunt tristique. Pellentesque condimentum scelerisque ipsum at feugiat. Phasellus fermentum aliquam eros in tincidunt.</span>
 <span class="lb_title">Lorem ipsum dolor sit amet</span>
 </a></div>
 </li>
 <li class= "2">
 <div class="picture">
 <a href="#" class="link">
 <img src="images/3.jpg" class="image animate" data-large="images/3.jpg"/>
 <span class="blend animate">
 <strong class="head">Lorem ipsum dolor sit amet</strong>
 <span class="text">OrnamentLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, nulla id ullamcorper consequat, urna massa pellentesque lectus, et lobortis felis tellus at lorem. Curabitur sed arcu placerat nisl mollis facilisis. Nam tempus massa elit, ut porta mi. Aenean id tempor diam. Sed nec nibh congue lacus suscipit feugiat. Integer in augue nisi, quis tristique erat. Vivamus condimentum libero in risus tincidunt tristique. Pellentesque condimentum scelerisque ipsum at feugiat. Phasellus fermentum aliquam eros in tincidunt.</span>
 </a></div>
 </li>
</ul>
</div>
</form>
</body>
</html>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...