Dificuldades com Timeout e Slider Jquery
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={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);
}
};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
Discussão (5)
Carregando comentários...