I know this topic has been covered both here and here, but I'm afraid I still haven't been able to figure out the exact source of the issue that's causing my SlideShow (using FadeGallery) to queue the animations while I'm on another tab and then speed through the slides upon my return on Firefox. Any chance someone out there can help me tackle the issue?
I am pretty terrible with JS and really have no place even attempting to figure this out on my own... but, I have been, to no avail. So, any help would be appreciated. Based on the previous posts, it seems to either be something with setTimeout, .queue or $(window).focus, but I'm just not entirely sure what to do to change it.
jQuery.noConflict();
jQuery(function(){
initSlideshow();
});
// slideshow init
function initSlideshow(){
jQuery('div.slide-show').fadeGallery({
pauseOnHover:true,
autoRotation:true,
switchTime:7000 //ms
});
};
// slideshow plugin
jQuery.fn.fadeGallery = function(_options){
var _options = jQuery.extend({
slideElements:'ul.slide > li',
pagerGener: true,
pagerHold: 'div.switcher',
pagerLinks:'div.switcher li',
btnNext:'a.btn-next',
btnPrev:'a.btn-prev',
btnPlayPause:'a.play-pause',
btnPlay:'a.play',
btnPause:'a.pause',
pausedClass:'paused',
disabledClass: 'disabled',
playClass:'playing',
activeClass:'active',
currentNum:false,
allNum:false,
startSlide:null,
noCircle:false,
caption:'ul.caption > li',
pauseOnHover:true,
autoRotation:false,
autoHeight:false,
onChange:false,
switchTime:3000,
duration:650,
event:'click'
},_options);
return this.each(function(){
// gallery options
var _this = jQuery(this);
var _slides = jQuery(_options.slideElements, _this);
var _btnPrev = jQuery(_options.btnPrev, _this);
var _btnNext = jQuery(_options.btnNext, _this);
var _btnPlayPause = jQuery(_options.btnPlayPause, _this);
var _btnPause = jQuery(_options.btnPause, _this);
var _btnPlay = jQuery(_options.btnPlay, _this);
var _pauseOnHover = _options.pauseOnHover;
var _autoRotation = _options.autoRotation;
var _activeClass = _options.activeClass;
var _disabledClass = _options.disabledClass;
var _pausedClass = _options.pausedClass;
var _playClass = _options.playClass;
var _autoHeight = _options.autoHeight;
var _duration = _options.duration;
var _switchTime = _options.switchTime;
var _controlEvent = _options.event;
var _currentNum = (_options.currentNum ? jQuery(_options.currentNum, _this) : false);
var _allNum = (_options.allNum ? jQuery(_options.allNum, _this) : false);
var _startSlide = _options.startSlide;
var _noCycle = _options.noCircle;
var _onChange = _options.onChange;
var _pagerGener = _options.pagerGener;
var _pagerHold = jQuery(_options.pagerHold,_this);
var _caption = jQuery(_options.caption,_this);
var _paging = '';
if(_pagerGener){
for(var i=0; i< _slides.length; i++){
_paging += '<li><a href="#">'+(i+1)+'</a></li>';
}
_pagerHold.html('<ul>'+_paging+'</ul>');
}
var _pagerLinks = jQuery(_options.pagerLinks, _this);
// gallery init
var _hover = false;
var _prevIndex = 0;
var _currentIndex = 0;
var _slideCount = _slides.length;
var _timer;
if(_slideCount < 2) return;
_prevIndex = _slides.index(_slides.filter('.'+_activeClass));
if(_prevIndex < 0) _prevIndex = _currentIndex = 0;
else _currentIndex = _prevIndex;
if(_startSlide != null) {
if(_startSlide == 'random') _prevIndex = _currentIndex = Math.floor(Math.random()*_slideCount);
else _prevIndex = _currentIndex = parseInt(_startSlide);
}
_slides.hide().eq(_currentIndex).show();
_caption.hide().eq(_currentIndex).show();
if(_autoRotation) _this.removeClass(_pausedClass).addClass(_playClass);
else _this.removeClass(_playClass).addClass(_pausedClass);
// gallery control
if(_btnPrev.length) {
_btnPrev.bind(_controlEvent,function(){
prevSlide();
return false;
});
}
if(_btnNext.length) {
_btnNext.bind(_controlEvent,function(){
nextSlide();
return false;
});
}
if(_pagerLinks.length) {
_pagerLinks.each(function(_ind){
jQuery(this).bind(_controlEvent,function(){
if(_currentIndex != _ind) {
_prevIndex = _currentIndex;
_currentIndex = _ind;
switchSlide();
}
return false;
});
});
}
// play pause section
if(_btnPlayPause.length) {
_btnPlayPause.bind(_controlEvent,function(){
if(_this.hasClass(_pausedClass)) {
_this.removeClass(_pausedClass).addClass(_playClass);
_autoRotation = true;
autoSlide();
} else {
_autoRotation = false;
if(_timer) clearTimeout(_timer);
_this.removeClass(_playClass).addClass(_pausedClass);
}
return false;
});
}
if(_btnPlay.length) {
_btnPlay.bind(_controlEvent,function(){
_this.removeClass(_pausedClass).addClass(_playClass);
_autoRotation = true;
autoSlide();
return false;
});
}
if(_btnPause.length) {
_btnPause.bind(_controlEvent,function(){
_autoRotation = false;
if(_timer) clearTimeout(_timer);
_this.removeClass(_playClass).addClass(_pausedClass);
return false;
});
}
// gallery animation
function prevSlide() {
_prevIndex = _currentIndex;
if(_currentIndex > 0) _currentIndex--;
else {
if(_noCycle) return;
else _currentIndex = _slideCount-1;
}
switchSlide();
}
function nextSlide() {
_prevIndex = _currentIndex;
if(_currentIndex < _slideCount-1) _currentIndex++;
else {
if(_noCycle) return;
else _currentIndex = 0;
}
switchSlide();
}
function refreshStatus() {
if(_pagerLinks.length) _pagerLinks.removeClass(_activeClass).eq(_currentIndex).addClass(_activeClass);
if(_currentNum) _currentNum.text(_currentIndex+1);
if(_allNum) _allNum.text(_slideCount);
_slides.eq(_prevIndex).removeClass(_activeClass);
_slides.eq(_currentIndex).addClass(_activeClass);
if(_noCycle) {
if(_btnPrev.length) {
if(_currentIndex == 0) _btnPrev.addClass(_disabledClass);
else _btnPrev.removeClass(_disabledClass);
}
if(_btnNext.length) {
if(_currentIndex == _slideCount-1) _btnNext.addClass(_disabledClass);
else _btnNext.removeClass(_disabledClass);
}
}
if(typeof _onChange === 'function') {
_onChange(_this, _currentIndex);
}
}
function switchSlide() {
_slides.eq(_prevIndex).fadeOut(_duration);
_slides.eq(_currentIndex).fadeIn(_duration);
_caption.eq(_prevIndex).fadeOut();
_caption.eq(_currentIndex).fadeIn();
if(_autoHeight) _slides.eq(_currentIndex).parent().animate({height:_slides.eq(_currentIndex).outerHeight(true)},{duration:_duration,queue:true});
refreshStatus();
autoSlide();
}
// autoslide function
function autoSlide() {
if(!_autoRotation || _hover) return;
if(_timer) clearTimeout(_timer);
_timer = setTimeout(nextSlide,_switchTime+_duration);
}
if(_pauseOnHover) {
_this.hover(function(){
_hover = true;
if(_timer) clearTimeout(_timer);
},function(){
_hover = false;
autoSlide();
});
}
refreshStatus();
autoSlide();
});
};
Thank you!
