Dificuldades com Timeout e Slider Jquery

[RodriAndreotti 25]

Boa tarde pessoal,

 

Estou tendo uma dificuldade com um slider que estou utilizando num site de um cliente, vou explicar, este cliente me contratou para fazer a migração de um banner de flash para jquery, para que o mesmo rode nos dispositivos portáteis que não suportam flash.

Enfim, o banner está funcionando no seguinte endereço: www.pinheiroturismo.com.br/teste.asp

Estou fazendo todos os testes aqui por enquanto, para não interferir no site, mas enfim... o slider como vocês podem ver acessando o link funciona perfeitamente, o grande problema é o seguinte, o cliente tem no painel administrativo um recurso para controlar o tempo de exibição de cada imagem no banner, e não estou conseguindo achar a forma de implementar isso no plugin que estou usando é o disponibilizado por este tutorial:

http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

 

Seguem os códigos:

html + asp

<div id="header" style="position:absolute; top: 0; left: 0; z-index:0">
           <div class="wrap">
           	<div id="slide-holder">
                   <div id="slide-runner">
                   	<%			

						Dim xmlGaleria,httpGaleria,html
						'Set httpGaleria = Server.CreateObject("MSXML2.ServerXMLHTTP.3.0")
						'httpGaleria.Open "GET","http://pinheiroturismo.com.br/dados_xml.asp",false
						'httpGaleria.Send

						Set xmlGaleria = Server.CreateObject("Microsoft.XMLDOM")
						xmlGaleria.async = false
						xmlGaleria.SetProperty "ServerHTTPRequest", True
						xmlGaleria.Load("http://pinheiroturismo.com.br/dados_xml.asp")
						Set photos = xmlGaleria.selectSingleNode("//jpgrotator/photos")

						html = ""
						js = ""
						i = 0
						for each banner in photos.childNodes
							'Response.Write(banner.getAttribute("page"))
							html = html & "<a href="""& banner.getAttribute("link") &"""><img id=""slide-img-"& i+1 &""" src="""& banner.getAttribute("path") &""" class=""slide"" alt="""" /></a>"

							if i < photos.childNodes.length -1 then
								js = js & "{""id"":""slide-img-" & i+1 &" "",""client"":"""",""desc"":"""",""at"":""" &banner.getAttribute("rotatetime")& """},"
							else
								js = js & "{""id"":""slide-img-" & i+1 & """,""client"":"""",""desc"":"""",""at"":""" &banner.getAttribute("rotatetime")& """}];"
							End If
							i = i + 1
						Next


						set xmlGaleria = nothing

						Response.Write(html)
					%>
				  <div id="slide-controls" style="z-index: 3">
                           <p id="slide-client" class="text"><strong></strong><span></span></p>
                           <p id="slide-desc" class="text"></p>
                           <p id="slide-nav"></p>
                       </div>
   				</div>
           	</div>
               <script type="text/javascript">

				if(!window.slider) var slider={};slider.data=[<%=js%>





			</script>
            </div>
       </div>

 

Javascript

window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
 +'\nError description: \t'+desc
 +'\nPage address:      \t'+page
 +'\nLine number:       \t'+line
);*/
}

$(function(){
$('a').focus(function(){this.blur();});
SI.Files.stylizeAll();
slider.init();

$('input.text-default').each(function(){
 $(this).attr('default',$(this).val());
}).focus(function(){
 if($(this).val()==$(this).attr('default'))
  $(this).val('');
}).blur(function(){
 if($(this).val()=='')
  $(this).val($(this).attr('default'));
});

$('input.text,textarea.text').focus(function(){
 $(this).addClass('textfocus');
}).blur(function(){
 $(this).removeClass('textfocus');
});

var popopenobj=0,popopenaobj=null;
$('a.popup').click(function(){
 var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
 var pobj=$('#'+pid);
 if(!pobj.length)
  return false;
 if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
  popopenobj.hide(50);
  $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
  popopenobj=null;
 }
 return false;
});
$('p.images img').click(function(){
 var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
 $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');

 $(this).parent().find('img').removeClass('on');
 $(this).addClass('on');
 return false;
});
$(window).load(function(){
 $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
 $.each(css_cims,function(){
  var css_im=this;
  $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
   (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
  });
 });
}); 
$('div.sc-large div.img:has(div.tml)').each(function(){
 $('div.tml',this).hide();
 $(this).append('<a href="#" class="tml_open"> </a>').find('a').css({
  left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
 }).click(function(){
  $(this).siblings('div.tml').slideToggle();
  return false;
 }).focus(function(){this.blur();}); 
});
});
var slider={
num:-1,
cur:0,
cr:[],
al:null,
at:10*1000,
ar:true,
init:function(){
 if(!slider.data || !slider.data.length)
  return false;

 var d=slider.data;
 slider.num=d.length;
 var pos=Math.floor(Math.random()*1);//slider.num);
 for(var i=0;i<slider.num;i++){
  $('#'+d[i].id).css({left:((i-pos)*1000)});
  $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
 }

 $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
 slider.text(d[pos]);
 slider.on(pos);
 slider.cur=pos;
 window.setTimeout('slider.auto();',slider.at);
},
auto:function(){
 if(!slider.ar)
  return false;

 var next=slider.cur+1;
 if(next>=slider.num) next=0;
 slider.slide(next);
},
slide:function(pos){
 if(pos<0 || pos>=slider.num || pos==slider.cur)
  return;

 window.clearTimeout(slider.al);
 slider.al=window.setTimeout('slider.auto();',slider.at);

 var d=slider.data;
 for(var i=0;i<slider.num;i++)
  $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');

 slider.on(pos);
 slider.text(d[pos]);
 slider.cur=pos;
},
on:function(pos){
 $('#slide-nav a').removeClass('on');
 $('#slide-nav a#slide-link-'+pos).addClass('on');
},
text:function(di){
 slider.cr['a']=di.client;
 slider.cr['b']=di.desc;
 slider.ticker('#slide-client span',di.client,0,'a');
 slider.ticker('#slide-desc',di.desc,0,'b');
},
ticker:function(el,text,pos,unique){
 if(slider.cr[unique]!=text)
  return false;

 ctext=text.substring(0,pos)+(pos%2?'-':'_');
 $(el).html(ctext);

 if(pos==text.length)
  $(el).html(text);
 else
  window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
}
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
htmlClass:'SI-FILES-STYLIZED',
fileClass:'file',
wrapClass:'cabinet',

fini:false,
able:false,
init:function(){
 this.fini=true;
},
stylize:function(elem){
 if(!this.fini){this.init();};
 if(!this.able){return;};

 elem.parentNode.file=elem;
 elem.parentNode.onmousemove=function(e){
  if(typeof e=='undefined') e=window.event;
  if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
   e.pageX=e.clientX+document.documentElement.scrollLeft;
   e.pageY=e.clientY+document.documentElement.scrollTop;
  };
  var ox=oy=0;
  var elem=this;
  if(elem.offsetParent){
   ox=elem.offsetLeft;
   oy=elem.offsetTop;
   while(elem=elem.offsetParent){
    ox+=elem.offsetLeft;
    oy+=elem.offsetTop;
   };
  };
 };
},
stylizeAll:function(){
 if(!this.fini){this.init();};
 if(!this.able){return;};
}
};

 

o xml de onde vêm as informações está no seguinte endereço: http://www.pinheiroturismo.com.br/dados_XML.asp

 

Se observarem no XML existe um atributo chamado rotatetime, este é o tempo que cada banner deve ficar em exibição.

Alguém saberia como posso fazer para implementar este tempo? Já li e relí o javascript para tentar entender como posso passar a variável com o tempo para que ela seja usada pelo slider, mas não achei a bendita.

 

Desde já agradeço a atenção.

 

Atenciosamente,

 

Rodrigo T. Andreotti

[William Bruno 1501]

esse atributo do objeto, que controle o tempo:

at:10*1000,

[RodriAndreotti 25]

E aew cara,

 

Primeiramenet, obrigado pela resposta tão rapidamente.

Realmente este objeto controla o tempo, eu havia encontrado ele, mas ele controla o tempo no geral, no caso deste cliente ele precisa de um controle indivídual, ou seja, cada banner terá um tempo de exibição diferente.

 

Antes da atualização para jQuery, eu já tinha feito uma atualização no banner em flash e tinha conseguido resolver isso.

Mas este objeto eu não to conseguindo chegar a uma lógica de como posso fazer, até tentei achar algum parametro para passar o tempo pela inicialização do objeto, mas sem sucesso.

 

Se você observar no js que carrega a galeria de banners você verá este trecho:

js = js & "{""id"":""slide-img-" & i+1 & """,""client"":"""",""desc"":"""",""at"":""" &banner.getAttribute("rotatetime")& """}];"

 

Esta parte

,""at"":""" &banner.getAttribute("rotatetime")& """

Eu adicionei na tentativa de faze-lo funcionar, mas não rolou (não podia ser tão fácil assim... hehehe)

 

Talvez se eu conseguir passar o tempo para essa propriedade at, a cada ocorrencia de banner.

 

Novamente, muito obrigado a todos.

[]s.

[William Bruno 1501]

putz cara... a função é recursiva..

 

mais fácil você reescrever todo o código prevendo isso, pq da forma q está essa implementação não é simples de fazer.(na verdade, teria q reescrever boa parte para tentar conseguir algo)

[RodriAndreotti 25]

Nessas horas que eu lembro das palavras do grande filósofo Homer Simpson... :ermm: Doh!!!

Então... vamos lá reinventar a roda né... hehehe

 

Obrigado pela ajuda cara.

 

Vou ver como vou fazer por aqui... e qualquer coisa posto o resultado final para servir para mais alguém que precise.

 

Abraços.

E novamente, Muito Obrigado.

[]s.

 

Rodrigo

[RodriAndreotti 25]

Olá Galera,

 

Seguinte, to reescrevendo o código desse banner da minha dúvida, na realidade ele já está semi-pronto, mas to com uma certa dificuldade de fazer os botões funcionarem como devem funcionar.

O ASP e o HTML ficaram iguáis ao do post inicial.

Meu novo javascript é este:

var tempo = new Array(); 
<%=js%>
var i = 1;
var o = 1;
var atual = "";
var imagem = "";
function efeito(idImg){
	$(idImg).animate({
		left: "-="+ $(idImg).width()
		},
		1000, function(){
			$(idImg).css("display","none");
			clearTimeout(efeito);
		});
}

function saida(idImg){
	var efeito = setTimeout('efeito("'+ idImg +'");next("'+ imagem +'");',(tempo[o]+2)*1000);
}


function next(idImg){
	$("#slide-link-"+ i).addClass('on');
	$("#slide-link-"+ (o)).removeClass('on');

	$(idImg).css("display", "inherit");
	$(idImg).css("left", $(idImg).width());
	$(idImg).animate({
		left: "-=" +$(idImg).width() },
		1000, function(){
			saida(idImg);
		});

	if(i==$("#slide-runner img").size()){
		o = 10;
		i = 1;
	}
	else{
		o = i;
		i += 1;
	}
	imagem = "#slide-img-"+ i
}

function gotoSlide(idImg){
	i = idImg;
	imagem = "#slide-img-"+ i;
}

function buildNav(){
	tam = $("#slide-runner img").size();
	$("#slide-controls").css("display", "inherit");
	for(x=1;x<=tam;x++){
		$("#slide-nav").append('<a id="slide-link-'+x+'" href="#" onclick="gotoSlide('+x+');return false;" onfocus="this.blur();">'+ x +'</a>'); 
	}
	$("#slide-link-1").addClass("on");
}


$(document).ready(function(){
	next("#slide-img-1");
	buildNav();	
});

 

Do jeito que está agora... ele muda o contador da foto para a clicada, mas ele só carrega ele depois de passar o timeout de duas imagens, traduzindo, se eu estiver visualizando a imagem "2" e clicar no botão "6", o banner passa todo o timeout da imagem "2", exibe a imagem "3" com todo seu timeout, para depois mostrar a imagem "6".

 

Caso queiram ver como está até o momento, o link é este: www.pinheiroturismo.com.br/teste.asp

 

Tentei chamar a função next() passando o id da foto (na realidade esta era minha idéia primária), fazendo desta forma, funciona, mas com um bug... eu passo a ter dois timouts simultaneos, cada um carrega uma imagem diferente (um seguindo a sequência e outro mostrando a que foi clicada) e fica uma bagunça só.

 

Alguma idéia de como posso fazer isso?

 

Novamente obrigado a todos.

 

[]s.