Ultimate Fade-in slideshow (v2.4) doesn't automatically start on page land [Archive]

DWooly

03-01-2013, 12:08 AM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I am using the ultimate fade-in slideshow on a site. I have a total of three galleries on the homepage. Here is a link (http://www.bistrodongiovanni.com) to the site.

I have a delay on the middle and right galleries, using these instructions (http://www.dynamicdrive.com/forums/showthread.php?67139-How-to-delay-second-slideshow/page2).

When a user first goes to the homepage, the slideshow does not play. If the homepage is refreshed or revisited it plays. This is an issue since the idea is for the slideshow to automatically start when a user lands on the homepage. This happens in Firefox , Chrome, and Safari (mac) and Firefox and IE 9 (PC.)

Is my code correct? I am strong in HTML & CSS, but don't have Javascript skills.

Thanks for any advice!

jscheuer1

03-01-2013, 05:31 AM

Get rid of the highlighted:

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

function over(e){
var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
jQuery.each(thegals, function(i, gal){
if(gal.setting.wrapperid !== id){
gal.setting.ismouseover = typeBool;
if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
}
});
}

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
gal.setting.playtimer = setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

Oh, and since you have no descriptions or links in the slideshow, and because sync is lost if you pause it, and because the pause doesn't seem to pause all the shows anyway, you might want to use this version:

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', function(){gal.setting.ismouseover = false;});
setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 3; //required - set to number of galleries

That way it won't pause at all, and so will stay in sync the entire time.