Try
$(document).ready(function(){
imageRotator();
// inspiration:
//http://aarontennyson.com/tutorials/demos/slide_show_fade/
});
function imageRotator() {
var active = $('#bigImage .active'),
thumbnails = $('#thumbnails li'),
activeThumbnail = $('#thumbnails .activeThumbnail'),
activeID = active.prop('id'),
next = active.next().length ? active.next() : active.parent().children(':first'),
nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first');
// `.show()` `$(active)`, `0` `duration`
// `.delay()` `1200` `duration`,
// for page load time, adjustable
// continue to `.fadeOut()` method
$(active).show(0).delay(1200).fadeOut(800, function() {
thumbnails.removeClass('activeThumbnail');
nextThumb.addClass('activeThumbnail');
next.fadeIn(800).addClass('active');
}).removeClass('active');
setTimeout(imageRotator, 5000);
}
jsfiddle http://jsfiddle.net/guest271314/n868c/
Edit
That does help! Not exactly perfect but does the trick. What about setting a flag that once true, THEN the rotator starts? Is there a way to do this? – JsusSalv
$(document).ready(function() {
// `flag` = `started`, default `false`,
// `.on()` `click` of `:first` `#bigImage`,
// or `:first` `#thumbnails` (`selectors`, `event`, adjustable)
// `img`, `flag` set to `true`,
// if `flag` === `true`,
// call (start) `imageRotator()`
var started = false;
$("#bigImage img:first, #thumbnails li img:first")
.on("click", function(e) {
e.preventDefault();
started = true;
if ( started === true ) {
imageRotator();
started = false;
console.log(started);
};
});
// imageRotator();
// inspiration:
//http://aarontennyson.com/tutorials/demos/slide_show_fade/
});
jsfiddle: link above, updated, including flag
, event
pieces