Galeria JS.

[Mateus Cunha]

Hola Pensadores, sou iniciante nisso, mas já tenho algumas coisas, para discussao!!!

Tenho um codigo em java script que cria uma galeria de fotos que baixei na net.

O que acontece e que quando d um click nos thumbs, carrega uma imagem jpg, com um background, tres botoes -

1 de fechar a imagem,1 de proximo e outro de anterior e um link slide show

Minha duvida e que preciso fazer este link slide show ser um link para um pdf da imagem correspondente!!!

já tentei de tudo, fazer um loop na pasata onde estao os pdfs e não funciona

Algue pode me ajudar.

Segue abaixo o codigo mais detalhado e algumas observacoes.

var todasImagens = new Array;
var Atual = "";
var proxLink = "";
var antLink = "";
var slide=false;
var tempo=3000; 
var skin="azul";
var wordpress = ""; 

function $() {
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string') element = document.getElementById(element);
    if (arguments.length == 1) return element;
    elements.push(element);
  }
  return elements;
}
if(wordpress!="") skin=wordpress+"/skin/"+skin;
else skin="skin/"+skin;
function adicionarEvento(objeto, TipoEvento, funcao){
	if(objeto.addEventListener){ 
		objeto.addEventListener(TipoEvento, funcao, false);
		return true;
	} else if (objeto.attachEvent){ // IE
		var r = objeto.attachEvent('on'+TipoEvento, funcao);
		return r;
	} else {
		return false;
	}
}
//==============================
function preCarrega(img,atual){
	nova_img = new Image();
	nova_img.onload=function(){
		total = img.length;
		var porc = Math.ceil((atual*100)/total);
		$("preload_label").style.height=porc+"px";
		proxima = atual+1;
		if(proxima<total) preCarrega(img,proxima);
		else { 
			$("preload_label").style.height="100px";
			setTimeout("fadeOut('preload_quadro');",300);
		}		
	}
	nova_img.src = img[atual][1];
}
function preCarregarImgs(){
	var todosLinks = document.getElementsByTagName('a');
	var cl = 0;
	for (var i=0; i<todosLinks.length; i++){
		var cada_link = todosLinks[i];
		var atributo_rel = String(cada_link.getAttribute('rel'));
		if (cada_link.getAttribute('href') && (atributo_rel.toLowerCase().match('aumenta'))){ 
			todasImagens.push(new Array(cl, cada_link.getAttribute('href'), cada_link.getAttribute('title')));
			cl++;
		}
	}
	cria_PL();
	preCarrega(todasImagens,0);
}
function centralizaObj(larg, alt){
	window.scrollTo(0,0); 
	medidas = pegaMedidas(false); 
	larguraPag = medidas[0];
	alturaPag = medidas[1];


	margemH = -1*(larg/2);
	limiteH = -1*(larguraPag/2);
	if(margemH<limiteH) margemH = limiteH+5;
	$("quadro").style.marginLeft=margemH+"px";


	margemY = -1*(alt/2);
	limiteY = -1*(alturaPag/2);
	if(margemY<limiteY) margemY = limiteY+5;
	$("quadro").style.marginTop=margemY+"px";	
}
function pegaMedidas(rolagem){

	var larguraPag, alturaPag;
	if (self.innerHeight) {	
		larguraPag = self.innerWidth;
		alturaPag = self.innerHeight; 
		larguraPag = document.documentElement.clientWidth;
		alturaPag = document.documentElement.clientHeight;
	} else if (document.body) { 
		larguraPag = document.body.clientWidth;
		alturaPag = document.body.clientHeight;
	}
	if(rolagem){ 
		var rolagemH, rolagemV;

		if (window.innerHeight && window.scrollMaxY) {	
			rolagemH = document.body.scrollWidth;
			rolagemV = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ 

			rolagemH = document.body.scrollWidth;
			rolagemV = document.body.scrollHeight;
		} else { 
			rolagemH = document.body.offsetWidth;
			rolagemV = document.body.offsetHeight;
		}	

		if(rolagemV > alturaPag) {
			alturaPag = rolagemV;
			if(/Internet Explorer/.test(navigator.appName)) alturaPag+=30; // corrigir bug IE
		}

		if(rolagemH > larguraPag) larguraPag = rolagemH;
	}
	valores = new Array(larguraPag,alturaPag); 
	return valores;
}


Aqui eu comeco a criar as divs que carrega a imagem maior


function cria_PL(){
	var objBody = document.getElementsByTagName("body").item(0);

	var objQuadroPL = document.createElement("div");
	objQuadroPL.setAttribute('id','preload_quadro');
	objQuadroPL.style.position="absolute";
	objQuadroPL.style.border="solid 1px #00a4e7";
	objQuadroPL.style.background="#00a4e7";
	objQuadroPL.style.bottom="10px";
	objQuadroPL.style.right="10px";
	objQuadroPL.style.display="none";
	objQuadroPL.style.height="108px";
	objQuadroPL.style.width="18px";
	objQuadroPL.style.zIndex=999;
	objBody.appendChild(objQuadroPL);

	var objlabelPL = document.createElement("div");
	objlabelPL.setAttribute('id','preload_label');
	objlabelPL.style.position="absolute";
	objlabelPL.style.border="solid 1px #cccccc";
	objlabelPL.style.background="#999999";
	objlabelPL.style.left="3px";
	objlabelPL.style.top="2px";
	objlabelPL.style.height="0px";
	objlabelPL.style.width="10px";
	objlabelPL.style.zIndex=999;
	objQuadroPL.appendChild(objlabelPL);

	fadeIn("preload_quadro");

}
function criaObjetos(){
	medidas = pegaMedidas(true); 
	larguraPag = medidas[0];
	alturaPag = medidas[1];


	var objBody = document.getElementsByTagName("body").item(0);


	var objFundo = document.createElement("div");
	objFundo.setAttribute('id','fundo_img'); 
	// CSS do objeto
	objFundo.style.position="absolute"; 
	objFundo.style.top="0px";
	objFundo.style.left="0px";
	objFundo.style.width=larguraPag+"px";
	objFundo.style.height=alturaPag+"px";
	objFundo.style.background="#000000";
	objFundo.style.zIndex=998;
	objFundo.style.MozOpacity=.7; 
	objFundo.style.opacity=.7;
	objFundo.style.filter="Alpha(Opacity=70)"; 

	objBody.appendChild(objFundo);


	var objQuadroext = document.createElement("div");
	objQuadroext.setAttribute('id','quadro');
	objQuadroext.style.position="absolute";

	objQuadroext.style.top="50%";
	objQuadroext.style.left="50%";
	objQuadroext.style.width="50px";
	objQuadroext.style.height="50px";
	objQuadroext.style.background="ffffff";
	objQuadroext.style.padding="5px";
	objQuadroext.style.zIndex=999;
	objBody.appendChild(objQuadroext);


	var objTopo = document.createElement("div");
	objTopo.setAttribute('id','topo_quadro');
	objTopo.style.display='none';	
	objTopo.style.width="100%";
	objTopo.style.height="22px";
	objTopo.style.position='relative';
	objQuadroext.appendChild(objTopo);	


	var objFechar = document.createElement("a");
	objFechar.setAttribute('id','Fechar');
	objFechar.setAttribute('href','java script:void(0)');
	objFechar.style.position='absolute';
	objFechar.style.right='5px';
	objFechar.style.top='25px';
	objFechar.onclick = function() {
		$("quadro").style.display="none";
		slide=false;
		$("fundo_img").style.display="none";
		slideShow();
		return false;
	}
	objTopo.appendChild(objFechar);


	var objTitulo = document.createElement("span");
	//objTitulo.setAttribute('id','titulo_quadro');
	objTitulo.style.fontWeight='bold';
	objTitulo.style.fontWeight='bold';
	objTitulo.style.position='absolute';
	objTitulo.style.left='5px';
	objTopo.appendChild(objTitulo);	




	var objimgFechar = document.createElement("img");
	objimgFechar.setAttribute('id','imgFechar');
	objimgFechar.src=skin+'/fechar.jpg';
	objimgFechar.alt='Fechar';
	objimgFechar.style.border='0';
	objFechar.appendChild(objimgFechar);



	var objImagemLoad = document.createElement("img");
	objImagemLoad.setAttribute('id','img_loading');
	objImagemLoad.src=skin+'/loading.gif';
	objImagemLoad.style.position='absolute';
	objImagemLoad.style.left='50%';
	objImagemLoad.style.top='50%';
	objImagemLoad.style.margin='-17px 0 0 -17px';
	objQuadroext.appendChild(objImagemLoad);


	var objImagem = document.createElement("img");
	objImagem.setAttribute('id','img_maior');
	objImagem.style.display='none';
	objQuadroext.appendChild(objImagem);


	var objRodape = document.createElement("div");
	objRodape.setAttribute('id','rodape_quadro');
	objRodape.style.display='none';	
	objRodape.style.width="100%";
	objRodape.style.height="25px";
	objRodape.style.position='relative';
	objQuadroext.appendChild(objRodape);	


Aqui comeca o problema, eu queria substituir o slide show para um link para um pdf correspondente a imagem que carrega
a imagem carrega de uma pasta onde estao os pdfs!!!

// cria o link de ir a imagem anterior
	var objAnterior = document.createElement("a");
	objAnterior.setAttribute('id','link_anterior');
	objAnterior.setAttribute('href','java script:void(0)');
	objAnterior.style.position='absolute';
	objAnterior.style.left='5px';
	objAnterior.style.top='-25px';
	objAnterior.style.bottom='0';
	objAnterior.onclick = function() {
		preparaImg(todasImagens[antLink][1], todasImagens[antLink][2]);
		return false;
	}
	objRodape.appendChild(objAnterior);

	// cria o icone de ir a imagem anterior
	var objimgAnterior = document.createElement("img");
	objimgAnterior.setAttribute('id','imgAnterior');
	objimgAnterior.src=skin+'/anterior1.jpg';
	objimgAnterior.style.border='0';
	objAnterior.appendChild(objimgAnterior);

	// cria o link de ir a imagem posterior
	var objPosterior = document.createElement("a");
	objPosterior.setAttribute('id','link_posterior');
	objPosterior.setAttribute('href','java script:void(0)');
	objPosterior.style.position='absolute';
	objPosterior.style.right='5px';
	objPosterior.style.top='-25px';
	objPosterior.style.bottom='0';
	objPosterior.onclick = function() {
		preparaImg(todasImagens[proxLink][1], todasImagens[proxLink][2]);
		return false;
	}
	objRodape.appendChild(objPosterior);		

	// cria o icone de ir a imagem posterior
	var objimgPosterior = document.createElement("img");
	objimgPosterior.setAttribute('id','imgPosterior');
	objimgPosterior.src=skin+'/posterior.jpg';
	objimgPosterior.style.border='0';
	objPosterior.appendChild(objimgPosterior);


?????????????????????

	// cria slide
	var objSlide = document.createElement("a");
	objSlide.setAttribute('id','slide');
	objSlide.setAttribute('href','java script:void(0)');
	objSlide.setAttribute('title','Clique para ativar o Slideshow');
	objSlide.style.position='absolute';
	objSlide.style.fontFamily='Arial';
	objSlide.style.fontSize='10';
	objSlide.style.left='50%';
	objSlide.style.top='-105%';
	objSlide.style.bottom='2px';
	objSlide.style.marginLeft='-70px';
	objSlide.onclick = function() {
		if(slide==false) slide = true;
		else slide=false;
		slideShow();
		return false;
	}	
	objSlide.innerHTML = "START SLIDESHOW";
	objRodape.appendChild(objSlide);
}
function fadeIn(id, valor){
	var obj = $(id);
	if(!valor || valor == undefined) valor=0;
	if(valor < 100){
		valor+=5;
		alpha = valor/100;
		obj.style.MozOpacity=alpha;
		obj.style.filter="alpha(opacity="+valor+")";
		obj.style.opacity = alpha;
		if(obj.style.display == "none") obj.style.display = "";
		setTimeout("fadeIn('"+id+"',"+valor+")",1);
	}
}
function fadeOut(id, valor){
	var obj = $(id);
	if(valor == undefined) valor=100;
	if(valor > 0){
		valor-=5;
		alpha = valor/100;
		obj.style.MozOpacity=alpha;
		obj.style.filter="alpha(opacity="+valor+")";
		obj.style.opacity = alpha;
		if(obj.style.display == "none") obj.style.display = "";
		setTimeout("fadeOut('"+id+"',"+valor+")",1);
	}
}
function slideShow(){
	if(slide==true){
		$("link_anterior").style.display="none";
		$("link_posterior").style.display="none";	
		totalImgs = todasImagens.length;
		if(proxLink>=totalImgs) { proxLink = 0; antLink=-1; }
		document.getElementById("slide").innerHTML = "SLIDESHOW ACTIVATED";
		setTimeout("preparaImg(todasImagens[proxLink][1], todasImagens[proxLink][2], 'slideshow')",tempo);
		setTimeout("slideShow()",tempo);
	} else {
		var Ultima = todasImagens.length-1;
		document.getElementById("slide").innerHTML = "SLIDESHOW STOPED";
		if(Atual==Ultima) { proxLink = 0; antLink=Ultima-1; }
		if(Atual==0) {
			$("link_anterior").style.display="none";
			$("link_posterior").style.display="";
		}else if(Atual==Ultima){
			$("link_posterior").style.display="none";
			$("link_anterior").style.display="";
		}
		else {
			$("link_anterior").style.display="";
			$("link_posterior").style.display="";
		}
	}
}
function preparaImg(img, titulo, tipo){
	if(tipo==undefined) tipo = "ok";
	if(tipo=="ok" || (tipo=="slideshow"&&slide==true)){
		totalImgs = todasImagens.length;
		var Ultima = totalImgs-1;
		for(var i=0;i<totalImgs;i++){
			if(todasImagens[i][1]==img) Atual = i;
		}
		proxLink = Atual+1;
		antLink = Atual-1;


		if($("quadro")==null) criaObjetos();
		else {

			$("quadro").style.display="";
			$("quadro").style.width="50px";
			$("quadro").style.height="50px";
			$("img_loading").style.display="";
			$("fundo_img").style.display="";
			$("img_maior").style.display="none";
			$("topo_quadro").style.display="none";
			$("rodape_quadro").style.display="none";
		}

		$("img_maior").onload=function(){
			$("img_loading").style.display="none";
			fadeIn(this.getAttribute("id"));
			largura_quadro=this.offsetWidth;
			altura_quadro=this.offsetHeight+50;

			centralizaObj(largura_quadro,altura_quadro);

			largura_quadro = largura_quadro>360?largura_quadro:360;


			$("quadro").style.textAlign='center';
			$("quadro").style.width=largura_quadro+"px";
			$("quadro").style.height=altura_quadro+"px";
			$("topo_quadro").style.display="";
			$("rodape_quadro").style.display="";
			$("titulo_quadro").innerHTML=titulo; 

			if(tipo=="slideshow"){
				$("link_anterior").style.display="none";
				$("link_posterior").style.display="none";			
			} else {
				if(Atual==0) {
					if(totalImgs>1){
						$("link_anterior").style.display="none";
						$("link_posterior").style.display="";
					} else {
						$("slide").style.display="none";
						$("link_anterior").style.display="none";
						$("link_posterior").style.display="none";
					}
				}else if(Atual==Ultima){
					if(totalImgs>1){
						$("link_posterior").style.display="none";
						$("link_anterior").style.display="";
					} else {
						$("slide").style.display="none";
						$("link_anterior").style.display="none";
						$("link_posterior").style.display="none";
					}
				}
				else {
					if(totalImgs>1){
						$("link_anterior").style.display="";
						$("link_posterior").style.display="";
					} else {
						$("slide").style.display="none";
						$("link_anterior").style.display="none";
						$("link_posterior").style.display="none";
					}
				}
			}
		}

		$("img_maior").onerror=function(){ 
			alert("Erro: Impossivel carregar a imagem");
			$("quadro").style.display="none";
			$("fundo_img").style.display="none";
			$("img_loading").style.display="none";
			$("img_maior").src='loading.gif';
		}	

		$("img_maior").src=img;
	}
}
function ajustaQuadro(){
	if($("quadro")){
		centralizaObj($("quadro").offsetWidth,$("quadro").offsetHeight);
		medidas = pegaMedidas(true); 
		larguraPag = medidas[0];
		alturaPag = medidas[1];
		$("fundo_img").style.height = alturaPag+"px";
		$("fundo_img").style.width = larguraPag+"px";
	}
}
function checaLinks(){
	preCarregarImgs();
	var todosLinks = document.getElementsByTagName("a");
	for (var i=0; i<todosLinks.length; i++){ 
			var cada_link = todosLinks[i]; 
			var atributo_rel = String(cada_link.getAttribute('rel')); 
			if (cada_link.getAttribute('href') && (atributo_rel.toLowerCase().match('aumenta'))){ 

				cada_link.onclick = function () { preparaImg(this.getAttribute('href'), this.getAttribute('title')); return false; } [/codebox]

segue o link disto funcionando

http://www.metropolismedia.us/port_display.html

valeu