Ir para conteúdo

POWERED BY:

Arquivado

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

VOM

Erro em galeria de imagem

Por , em Javascript

Recommended Posts

VOM    0

VOM
Postado

Aê galera tou tentando fazer um portfolio com imagens, descrição e efeitos na imagem.

 

Minha idéia é ter 4 links ( Exemplo: link1, link2, link3, link 4), e quando eu clicar em 1 destes links, abra uma imagem com um descrição.

 

Então segue o código abaixo, no entanto não tá funcionando (carregando as outras imagens) quando eu clico nos outros links (link2, link3, link4), só esta carregando link 1.

 

Alguém pode me ajudar por favor, verificando onde tá o erro deste código. Desde já agradeço.

 

Arquivo ajaximage.js

var ie = (!window.opera && document.all);
var dom = (!document.all && document.getElementById);
var gallery_index = 0;
var description_index = 0;

function ajaxManager()
	{
	var args = ajaxManager.arguments;
	switch (args[0])
		{
		case "array_setup":
			galleryArray = new Array();
			galleryArray[0] = "image1.html";
			galleryArray[1] = "image2.html";
			galleryArray[2] = "image3.html";
			galleryArray[3] = "image4.html";
			galleryArray[4] = "image5.html";
			galleryArray[5] = "image6.html";

			descriptionArray = new Array();
			descriptionArray[0] = "description1.xml";
			descriptionArray[1] = "description2.xml";
			descriptionArray[2] = "description3.xml";
			descriptionArray[3] = "description4.xml";
			descriptionArray[4] = "description5.xml";
			descriptionArray[5] = "description6.xml";
			break;
		case "load_page":
			var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
			pageWidth = (dom) ? innerWidth : document.body.clientWidth;
			preload = document.getElementById("preloadLYR");
			gallery = document.getElementById("galleryLYR");
			if (x)
				{
				x.onreadystatechange = function()
					{
					if (x.readyState == 0)
						{
						preload.innerHTML = "Inicializando";
						}
					else if (x.readyState == 1)
						{
						preload.innerHTML = "Processando a requisição";
						}
					else if (x.readyState == 2)
						{
						preload.innerHTML = "Pedido reconhecido";
						}
					else if (x.readyState == 3)
						{
						preload.innerHTML = "Abrindo imagem...";
						setOpacity(0, 'galleryLYR');
						setOpacity(0, 'captionLYR');
						}
					else if (x.readyState == 4 && x.status == 200)
						{
						el = document.getElementById(args[2]);
						el.innerHTML = x.responseText;
						preload.innerHTML = "Standy: Fading Image In...";
						getImageSize = document.getElementsByTagName("img")[0].getAttribute("width");
						gallery.style.left = (pageWidth - getImageSize) / 2+"px";
						preload.style.left = (pageWidth - getImageSize) / 2+"px";
						document.getElementById('captionLYR').style.left = (pageWidth -	getImageSize) / 2+"px";
						document.getElementById('accessLYR').style.visibility = "hidden";
						setTimeout("fadeIn('galleryLYR', 0, '99.99')", 1200);
						setTimeout("fadeIn('captionLYR', 0, '99.99')", 1300);
						}
					}
				x.open("GET", args[1], true);
				x.send(null);
				}
			break;

		case "cycle_gallery":
			if (args[0] == 'pri')
				{
				ajaxManager('load_page', galleryArray[0], 'galleryLYR');
				ajaxManager('load_page', descriptionArray[0], 'captionLYR');
				}
			else if (args[1] == 'seg')
				{
				ajaxManager('load_page', galleryArray[1], 'galleryLYR');
				ajaxManager('load_page', descriptionArray[1], 'captionLYR');
				}
			else if (args[2] == 'ter')
					{
				ajaxManager('load_page', galleryArray[2], 'galleryLYR');
				ajaxManager('load_page', descriptionArray[2], 'captionLYR');
				}
			else if (args[3] == 'qua')
					{
				ajaxManager('load_page', galleryArray[3], 'galleryLYR');
				ajaxManager('load_page', descriptionArray[3], 'captionLYR');
				}

				
			break;
			
		case "hide_access":
			document.getElementById('accessLYR').style.visibility = "hidden";
			break;
		case "load_fx":
			document.getElementById('accessLYR').style.visibility = "hidden";
			break;
		case "start_up":
			ajaxManager('hide_access');
			ajaxManager('array_setup');
			ajaxManager('load_page', galleryArray[gallery_index], 'galleryLYR');
			ajaxManager('load_page', descriptionArray[description_index], 'captionLYR');
			break;
		}
	}


function fadeIn(id, startfade, endfade)
	{
	timer = 0;
	if (startfade < endfade)
		{
		for (i = startfade; i <= endfade; i++)
			{
			setTimeout("setOpacity(" + i + ",'" + id + "')", (timer * 20));
			timer++;
			}
		}
	}

function setOpacity(opacity, id)
	{
	var el = document.getElementById(id).style;
	el.opacity = (opacity / 100);
	el.MozOpacity = (opacity / 100);
	el.KhtmlOpacity = (opacity / 100);
	el.filter = "alpha(opacity=" + opacity + ")";
	}

Arquivo ajaxgallery.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta name="Author" content="Edward Traversa" />
 <meta name="keywords" content="Ajax, Image Gallery, XMLHttpRequest, XML, Application, JavaScript" />
 <meta name="description" content=" AJAX: Image Gallery By Edward Traversa" />
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>AJAX DHTML Image Gallery</title>
<script type="text/javascript" src="ajaximage.js">
</script>
<link href="ajaximage2.css" rel="stylesheet" type="text/css" title="Ajax Image Gallery" />

</head>
<body onload="ajaxManager('start_up')">

<!-- used to house the messages when images are loading -->

<div id="preloadLYR">
</div>

<!-- used to load the content into -->
<div id="galleryLYR">
</div>

<div id="captionLYR">
</div>

<!-- Page Displayed Title -->
<div id="titleLYR" class="title">

DHTML Nirvana: Ajax Fading Image Gallery
</div>

<!-- Cycles forward through the images -->
<div id="forwardLYR">

			<a href="#" onmousedown="ajaxManager('cycle_gallery','pri')"> Primeira </a>
			<a href="#" onmousedown="ajaxManager('cycle_gallery','seg')"> Segunda </a>

</div>

<!-- Cycles backward through the images -->
<div id="reverseLYR">

			<a href="#" onmousedown="ajaxManager('cycle_gallery','ter')">  Terceira </a>
			<a href="#" onmousedown="ajaxManager('cycle_gallery','qua')"> Quarta </a>


</div>

<!-- used for non supported browsers and for accessibility -->
<div id="accessLYR">
		<ul>
			<li><a href="image1.html" tabindex="10">View Image 1</a></li>
			<li><a href="image2.html" tabindex="10">View Image 2</a></li>
			<li><a href="image3.html" tabindex="10">View Image 3</a></li>
			<li><a href="image4.html" tabindex="10">View Image 4</a></li>

		
		</ul>
</div>
</body>
</html>

Arquivo image1.html, image2.html e etc...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Boat Picture</title>

</head>

<body>
<img src="images/Ninféias.jpg" width="598" height="413" alt="picture of boats" />
<div id="accessLYR">
		<ul>
			<li><a href="image1.html" tabindex="10">View Image 1</a></li>

			<li><a href="image2.html" tabindex="10">View Image 2</a></li>
			<li><a href="image3.html" tabindex="10">View Image 3</a></li>
			<li><a href="image4.html" tabindex="10">View Image 4</a></li>
			<li><a href="image5.html" tabindex="10">View Image 5</a></li>
			<li><a href="image6.html" tabindex="10">View Image 6</a></li>
		</ul>

</div>
</body>
</html>

Ou ainda, se alguém tiver algum código mais simples que faça isso, também agradeço.

 

Abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

estranho.com    0

estranho.com
Postado

não seria mais pratico se você usase um loop do javascript para geral os links usando variaveis em asp geradas por um banco de dados... assim ficaria mais simples ai no banco você só coloca uma tabela tipo evento com os dados do evento"aniversario do paulim... cod_evento '1' " e uma tabela fotos com um campo evento tipo chave primaria que corresponderia ao evento tipo cod_evento "1" campo foto tipo foto1... e um campo comentario..

 

nisso na pagina q abrir ou popup você buscar a variavel tipo

 

 

<script language="javascript">

numero = <%=variavel com o numero de fotos do evento%>;

 

x = 1

while (x < numero+1) {

document.write("<br><IMG WIDTH='750' HEIGHT='1000' SRC='fotos/<%=nome do evento%>/<%=foto%>"+x+".jpg'</img><br><p><%=comentario%></p><br>");

x++

}

</script>

 

e no link da foto na pagina anterior é só inserir a variaval

 

<a href="#" name="button" type="button" value="doctos" onclick="window.open('teste2.asp?nome evento=<%=rsProfile("nome evento")%>&num de fotos=<%=rsProfile("quant de fotos")%>&foto=<%=rsProfile("foto")%>&nomepasta=<%=rsProfile("nomepasta")%>','janela','toolbar=no, location=no, directories=no, status=no, menubar=no, width=800, height=600, resizeable=no,scrollbars=yes')"><%=rsProfile("foto")%></A>

 

 

você pod inserir o link dentro de um loop..

não sei se ajudei mais abrasss...

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