Hi everyone,
I integrated a simple jQuery rotating banner into my site.
http://www.mclelun.com/blog/2010/01/jquery-rotating-banner/
It works pretty well, but I had the same minor issue that several people in the comments had, where upon loading the page, all slides are overlapping for a split-second.
“Is there a way to hide the loading process and just show the 1st slide? I love the code and i’ve been trying to figure out a way to avoid seeing that initial slide right with all the slides on queue.”
One person gave this code as a fix, but it only seems to work if all slides are images, and text gets overlapped if there is any.
Inside jQuery(document).ready(function() {
jqb_tmp = ((i – 1)*460) – ((jqb_vCurrent -1)*460);
//$(this).animate({“left”: jqb_tmp+”px”}, 500);
Does any jQuery expert out there know how to fix this code?
Any ideas are appreciated… The full jqbanner.js is below.
Thanks!
var jqb_title;
jQuery(document).ready(function() {
jqb_vTotal = $(".jqb_slides").children().size() -1;
$(".jqb_info").text($(".jqb_slide").attr("title"));
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*460) - ((jqb_vCurrent -1)*460);
$(this).animate({"left": jqb_tmp+"px"}, 500);
});
$("#btn_pauseplay").click(function() {
if(jqb_vIsPause){
jqb_fnChange();
jqb_vIsPause = false;
$("#btn_pauseplay").removeClass("jqb_btn_play");
$("#btn_pauseplay").addClass("jqb_btn_pause");
} else {
clearInterval(jqb_intInterval);
jqb_vIsPause = true;
$("#btn_pauseplay").removeClass("jqb_btn_pause");
$("#btn_pauseplay").addClass("jqb_btn_play");
}
});
$("#btn_prev").click(function() {
jqb_vGo = -1;
jqb_fnChange();
});
$("#btn_next").click(function() {
jqb_vGo = 1;
jqb_fnChange();
});
});
function jqb_fnChange(){
clearInterval(jqb_intInterval);
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
jqb_fnLoop();
}
function jqb_fnLoop(){
if(jqb_vGo == 1){
jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
} else {
jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
}
$("#jqb_object").find(".jqb_slide").each(function(i) {
if(i == jqb_vCurrent){
jqb_title = $(this).attr("title");
$(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
$(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
});
}
//Horizontal Scrolling
jqb_tmp = ((i - 1)*460) - ((jqb_vCurrent -1)*460);
$(this).animate({"left": jqb_tmp+"px"}, 500);
/*
//Fade In & Fade Out
if(i == jqb_vCurrent){
$(".jqb_info").text($(this).attr("title"));
$(this).animate({ opacity: 'show', height: 'show' }, 500);
} else {
$(this).animate({ opacity: 'hide', height: 'hide' }, 500);
}
*/
});
}