Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ícarus Costa

Janela modal na galeria de imagens

Por , em Javascript

Recommended Posts

Ícarus Costa    0

Ícarus Costa
Postado

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);
?>

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

if (i<6) {
    $("#lightbox li."+i).trigger('click');
troque por:

 

if (i<$("#lightbox li").length) { 
    $("#lightbox li."+i).trigger('click');

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito