Publicado em 1 de abr.

Janela modal na galeria de imagens

Então pessoal, eu to com um script que ta com efeito de janela modal automático. O meu problema eh que não consigo percorrer as outras imagens conforme a condição:

//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)})
A ideia eh percorrer cada imagem exibindo na janela modal, com intervalo. Se poderem me ajudar eu agradeço muito.

Segue abaixo o script:

index.php

<?php require_once('Connections/galeria.php'); ?>

<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

{

 $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

 $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

 switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}
 mysql_select_db($database_galeria, $galeria);
 $query_fotos = "SELECT * FROM fotos ORDER BY id DESC";
 $fotos = mysql_query($query_fotos, $galeria) or die(mysql_error());
 $row_fotos = mysql_fetch_assoc($fotos);
 $totalRows_fotos = mysql_num_rows($fotos);
?>

<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">
 <?php do { ?>
 <?php require_once('Connections/galeria.php');?>
 <a href="imagens/<?php echo $row_fotos['foto']; ?>" rel="lightbox[roadtrip]"><img src="imagens/<?php echo $row_fotos['foto']; ?>" width="150" height="150" /></a>
 <?php } while ($row_fotos = mysql_fetch_assoc($fotos)); ?></div></td>
 </a></div>
 </li>
 <!--
 <li class= "2">
 <div class="picture">
 <a href="#" class="link">
 <?php do { ?>
 <?php require_once('Connections/galeria.php');?>
 <a href="imagens/<?php echo $row_fotos['foto']; ?>" rel="lightbox[roadtrip]"><img src="imagens/<?php echo $row_fotos['foto']; ?>" width="150" height="150" /></a>
 <?php } while ($row_fotos = mysql_fetch_assoc($fotos)); ?></div></td>
 </a></div>
 </li>
</div>
</form>
</body>
</html>

<?php
 mysql_free_result($fotos);
?>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...