Boa tarde comunidade!
Estou a iniciar no mundo jquery e iniciei agora um projecto onde pretendo realizar um slideshow com esta biblioteca;
pretendo que esse sildeshow seja automatico, mas existe um botão para cada elemento do slideshow que se for clicado tera que apresentar o elemento referente aquele botão.
O elemento é composto por imagem e descrição.
O problema do meu codigo é que quando clico no botão, o texto que esta a ser mostrado antes de carregar no botão demora a aparecer ...
Aqui fica o meu codigo ...
Código (Javascript):
agradeço desde já toda a ajuda que possam prestar
Estou a iniciar no mundo jquery e iniciei agora um projecto onde pretendo realizar um slideshow com esta biblioteca;
pretendo que esse sildeshow seja automatico, mas existe um botão para cada elemento do slideshow que se for clicado tera que apresentar o elemento referente aquele botão.
O elemento é composto por imagem e descrição.
O problema do meu codigo é que quando clico no botão, o texto que esta a ser mostrado antes de carregar no botão demora a aparecer ...
Aqui fica o meu codigo ...
Código (Javascript):
$(document).ready(function(){
$("a").removeAttr("title");
var i = 0;
var background = new Array();
$.ajax({url:"slide.php",type:"GET",dataType: "xml"}).done(function (xml,status){
$(xml).find('image').each(function(){
i++;
var url =$(this).find('url').text();
background[i]=url;
var description =$(this).find('description').text();
var title = $(this).find('title').text();
$("#textbox").append("<div id="+i+"><p>"+title+"</p><a class=\"white_text\" id="+i+">"+description+"</a></div>");
$("<a href=\"#\"><div id=\"cicle_"+i+"\"> </div></a>").appendTo(".btn_slideHome");
});
},function(){
var count;
var urlImage;
$("#topbanner").css("background","url('"+background[1]+"') no-repeat").show("fade",500);
$("#textbox #1").show("fade",500);
$("#cicle_1").toggleClass("btn_select_slideHome");
var vs = $("#textbox div").size();
if( vs > 1){
count = 2;
var teste = setInterval(function(){
},6500);
$("#textbox #1").delay(6500).hide("fade",{direction: 'left'},500);
var time = setInterval(function(){
$(".btn_slideHome div").click(function(){
id_a_ver = $("#textbox div:visible").attr("id");
$("#cicle_"+id_a_ver).toggleClass("btn_select_slideHome");
$("#textbox #"+id_a_ver).hide("fade");
count = $(this).attr("id").split("_")[1];
$("#topbanner").css("background","url("+background[count]+") no-repeat");
$("#cicle_"+count).toggleClass("btn_select_slideHome");
$("#textbox #"+count).show("fade",{direction:'right'},500);
});
$("#cicle_"+count).toggleClass("btn_select_slideHome");
urlImage = background[count];
$("#topbanner").css("background","url("+ urlImage+") no-repeat").show("fade",500);
$("#textbox #"+count).show("fade",{direction:'right'},500);
if(count-1 !=0 )
$("#cicle_"+(count-1)).toggleClass("btn_select_slideHome");
else
$("#cicle_"+vs).toggleClass("btn_select_slideHome");
$("#textbox #"+count).delay(6500).hide("fade",{direction:'left'},500);
if(count == vs){
count = 1;
}else{
count++;
}
},8500);
}
});
});
$("a").removeAttr("title");
var i = 0;
var background = new Array();
$.ajax({url:"slide.php",type:"GET",dataType: "xml"}).done(function (xml,status){
$(xml).find('image').each(function(){
i++;
var url =$(this).find('url').text();
background[i]=url;
var description =$(this).find('description').text();
var title = $(this).find('title').text();
$("#textbox").append("<div id="+i+"><p>"+title+"</p><a class=\"white_text\" id="+i+">"+description+"</a></div>");
$("<a href=\"#\"><div id=\"cicle_"+i+"\"> </div></a>").appendTo(".btn_slideHome");
});
},function(){
var count;
var urlImage;
$("#topbanner").css("background","url('"+background[1]+"') no-repeat").show("fade",500);
$("#textbox #1").show("fade",500);
$("#cicle_1").toggleClass("btn_select_slideHome");
var vs = $("#textbox div").size();
if( vs > 1){
count = 2;
var teste = setInterval(function(){
},6500);
$("#textbox #1").delay(6500).hide("fade",{direction: 'left'},500);
var time = setInterval(function(){
$(".btn_slideHome div").click(function(){
id_a_ver = $("#textbox div:visible").attr("id");
$("#cicle_"+id_a_ver).toggleClass("btn_select_slideHome");
$("#textbox #"+id_a_ver).hide("fade");
count = $(this).attr("id").split("_")[1];
$("#topbanner").css("background","url("+background[count]+") no-repeat");
$("#cicle_"+count).toggleClass("btn_select_slideHome");
$("#textbox #"+count).show("fade",{direction:'right'},500);
});
$("#cicle_"+count).toggleClass("btn_select_slideHome");
urlImage = background[count];
$("#topbanner").css("background","url("+ urlImage+") no-repeat").show("fade",500);
$("#textbox #"+count).show("fade",{direction:'right'},500);
if(count-1 !=0 )
$("#cicle_"+(count-1)).toggleClass("btn_select_slideHome");
else
$("#cicle_"+vs).toggleClass("btn_select_slideHome");
$("#textbox #"+count).delay(6500).hide("fade",{direction:'left'},500);
if(count == vs){
count = 1;
}else{
count++;
}
},8500);
}
});
});
agradeço desde já toda a ajuda que possam prestar