Erro em galeria de imagem
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">](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">](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
Discussão (1)
Carregando comentários...