from fade to slide: some troubles
I have a script that allow me to move between a div series, sequentially or directly, clicking on a specific icon.
This is the JS:
-
(function($) {
$.fn.loopedSlider = function(options) {
var defaults = {
container: '.container',
slides: '.slides',
pagination: '.pagination',
containerClick: false, // Click container for next slide
autoStart: 0, // Set to positive number for auto start and interval time
restart: 0, // Set to positive number for restart and restart time
slidespeed: 300, // Speed of slide animation
fadespeed: 300, // Speed of fade animation
autoHeight: false // Set to positive number for auto height and animation speed
};
this.each(function() {
var obj = $(this);
var o = $.extend(defaults, options);
var pagination = $(o.pagination+' li a',obj);
var m = 0;
var t = 1;
var s = $(o.slides,obj).children().size();
var w = $(o.slides,obj).children().outerWidth();
var p = 0;
var u = false;
var n = 0;
var interval=0;
var restart=0;
$(o.slides,obj).css({width<img src="images/smilies/frown.gif" border="0" alt="">s*w)});
$(o.slides,obj).children().each(function(){
$(this).css({position:'absolute',left:p,display:'block'});
p=p+w;
});
$(pagination,obj).each(function(){
n=n+1;
$(this).attr('rel',n);
$(pagination.eq(0),obj).parent().addClass('active');
});
$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
if (s>3) {
$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
}
if(o.autoHeight){autoHeight(t);}
$('.next',obj).click(function(){
if(u===false) {
animate('next',true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
$('.previous',obj).click(function(){
if(u===false) {
animate('prev',true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
if (o.containerClick) {
$(o.container ,obj).click(function(){
if(u===false) {
animate('next',true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
}
$(pagination,obj).click(function(){
if ($(this).parent().hasClass('active')) {return false;}
else {
t = $(this).attr('rel');
$(pagination,obj).parent().siblings().removeClass('active');
$(this).parent().addClass('active');
animate('fade',t);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
if (o.autoStart) {
sliderIntervalID = setInterval(function(){
if(u===false) {animate('next',true);}
}, o.autoStart);
function autoStart() {
if (o.restart) {
clearInterval(sliderIntervalID);
clearInterval(interval);
clearTimeout(restart);
restart = setTimeout(function() {
interval = setInterval( function(){
animate('next',true);
},o.autoStart);
},o.restart);
} else {
sliderIntervalID = setInterval(function(){
if(u===false) {animate('next',true);}
},o.autoStart);
}
};
}
function current(t) {
if(t===s+1){t=1;}
if(t===0){t=s;}
$(pagination,obj).parent().siblings().removeClass('active');
$(pagination+'[rel="' + (t) + '"]',obj).parent().addClass('active');
};
function autoHeight(t) {
if(t===s+1){t=1;}
if(t===0){t=s;}
var getHeight = $(o.slides,obj).children(':eq('+(t-1)+')',obj).outerHeight();
$(o.container,obj).animate({height: getHeight},o.autoHeight);
};
function animate(dir,clicked){
u = true;
switch(dir){
case 'next':
t = t+1;
m = (-(t*w-w));
current(t);
if(o.autoHeight){autoHeight(t);}
if(s<3){
if (t===3){$(o.slides,obj).children(':eq(0)').css({left<img src="images/smilies/frown.gif" border="0" alt="">s*w)});}
if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left<img src="images/smilies/frown.gif" border="0" alt="">w)});}
}
$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
if (t===s+1) {
t = 1;
$(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});
$(o.slides,obj).children(':eq(0)').css({left: 0});
$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});
}
if (t===s) $(o.slides,obj).children(':eq(0)').css({left<img src="images/smilies/frown.gif" border="0" alt="">s*w)});
if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
u = false;
});
break;
case 'prev':
t = t-1;
m = (-(t*w-w));
current(t);
if(o.autoHeight){autoHeight(t);}
if (s<3){
if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left<img src="images/smilies/frown.gif" border="0" alt="">-w)});}
if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
}
$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
if (t===0) {
t = s;
$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left<img src="images/smilies/frown.gif" border="0" alt="">s*w-w)});
$(o.slides,obj).css({left: -(s*w-w)});
$(o.slides,obj).children(':eq(0)').css({left<img src="images/smilies/frown.gif" border="0" alt="">s*w)});
}
if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
u = false;
});
break;
case 'fade':
t = [t]*1;
m = (-(t*w-w));
current(t);
if(o.autoHeight){autoHeight(t);}
if (s<3){
if (t===3){$(o.slides,obj).children(':eq(0)').css({left<img src="images/smilies/frown.gif" border="0" alt="">s*w)});}
if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left<img src="images/smilies/frown.gif" border="0" alt="">w)});}
if (t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left<img src="images/smilies/frown.gif" border="0" alt="">-w)});}
if (t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
}
$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
if (t===s+1) {
t = 1;
$(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});
$(o.slides,obj).children(':eq(0)').css({left: 0});
$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});
}
if (t===0) {
t = s;
$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left<img src="images/smilies/frown.gif" border="0" alt="">s*w-w)});
$(o.slides,obj).css({left: -(s*w-w)});
$(o.slides,obj).children(':eq(0)').css({left<img src="images/smilies/frown.gif" border="0" alt="">s*w)});
}
if (t===s) $(o.slides,obj).children(':eq(0)').css({left<img src="images/smilies/frown.gif" border="0" alt="">s*w)});
if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
u = false;
});
break;
default:
break;
}
};
});
};
})(jQuery);
Originally, the script was scheduled to act in two different ways: if the user click on prev or next button, the change behaviour is an horizontal slide; if the user click on the button related to a specific div, the change behaviour is a fade effect.
But, due a client request, I need to have always a slide effect, so I have done some changes to the
fade case.
Effectively, now it works, but with an ultimate trouble: the first and the last div (totally 9) can appear - with the slide effect - just if the related button is clicked when is showed the closer div. I.E., if the div currently showed is the n° 2, clicking the button of div n° 1 all works fine; at the same, if currently div is n° 8, clicking the button of n° 9 all works fine again. But in different cases - if the current div is 3, 4, 5, 6, 7 - clicking on button of n° 2 or n° 9 make disappear the current div, without the required appear (or any other... the space be empty...)
How can I solve this?
Any help will be very-very appreciate!