slideshow is ramping sometimes, don't know why?

[RDesignista]

Hi,

I'm a javascript/jquery novice. I know how to manipulate packaged plugins (pretty Photo, slides JS, lightbox), but I can't really decipher the whole thing or make stuff myself.

For a website I am making, I decided to use s3slider. I changed it so that the container holds both a textbox and picture and the effects are changed to fade, instead of scroll.

The "time" is set to 4000 (short so I can test slides), so including effects,there should be 4 seconds per side. However, sometimes, the slide time seems to be cut to less than a second -- it is speed ramping at random times. My only guess is that I may be using an old version of jQuery library and it causes things to get freaky? Not sure. Could you take a look?

**************ON PAGE CODE:

<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>

*************JAVASCRIPT FOR S3 SLIDER:
/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items).mouseover(function() {
mOver = true;
});

$(items).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/8), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/20), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).fadeIn((timeOut/20), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).fadeOut((timeOut/15), function() {
$(items[currNo]).fadeOut((timeOut/8), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).fadeOut((timeOut/15), function() {
$(items[currNo]).fadeOut((timeOut/8), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

[TheGAME1264]

I don't think it's anything you did wrong. I think this line is your problem:

var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

Looks like when the mouse is off your fader, it cuts the timeout in half. Just for the sake of simplicity, change it to this (make sure you back up any files first, so that you've got a restore point if something goes flaky):

var thisTimeOut = timeOut;

There is a more efficient way to handle this if I'm right, but you'd have to edit quite a bit of code and it probably isn't worth the time.

[RDesignista]

Game,

You're right: it's freaking out after a mouseOut action. So, it's nice for me to know that if people don't mouse over, it'll be fine.

I tried

var thisTimeOut = timeOut;

but it didn't fix the problem.

Is the

var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

the only thing that affects time after a mouseOut? I think I will try and play with it then. thanks.

-R

[TheGAME1264]

It would be in this case, but other things can affect time. The things that will do it will be where the timeOut has some form of arithmetic function applied to it (e.g. timeOut/2, timeOut/15, etc.) Those are the lines you'll want to edit.