Two fadeshows side by side not synced

[jsmiles70]

Hi - newbie here. I've created a bit of a patchwork website, and have two fadeshows running side by side. I can't get the pictures to load and run at the identical speed. It's a before and after effect, so i really need them to synchronize.

I used photoshop to try and get the image KB as close as possible, but they're still not identical. I'm not sure if that was the problem.

Any suggestions? Please help.

Thanks.

[jscheuer1]

It's not the KB size of the images that matter, those should be optimized for fastest loading, but they don't have to be the same because only the same image will be loaded at the exact same time.

We need another way to synchronize the slideshows.

Add this function (highlighted as shown) before the first on page fadeSlideShow call:

<script type="text/javascript">

fadeSlideShow.sync = function(){
	if(!fadeSlideShow.othergal){
		fadeSlideShow.othergal = this;
		return;
	}
	var othergal = fadeSlideShow.othergal, thisgal = this;
	function over(gal, e){
		var o = (gal.setting.ismouseover = e.type === 'mouseenter')? 'show' : 'hide';
		if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(o);}
	}

	
	this.setting.$wrapperdiv.bind('mouseenter mouseleave', function(e){over(othergal, e);});
	othergal.setting.$wrapperdiv.bind('mouseenter mouseleave', function(e){over(thisgal, e);});
	setTimeout(function(){thisgal.setting.playtimer = othergal.setting.playtimer = setTimeout(function(){
		othergal.setting.displaymode.type = thisgal.setting.displaymode.type = 'auto';
		thisgal.showslide('next'); othergal.showslide('next');}, thisgal.setting.displaymode.pause);}, 1.1 * this.setting.fadeduration);

};

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [550, 460], //width/height of gallery in  . . .

Then, in your two fadeSlideShow calls, make sure make sure that the displaymode type is manual, that the pause is the same for both, the wraparound true, and the cycles 0. And make sure the fadeduration is also the same for both:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["sunflower.jpeg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["flip-flops.jpeg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["rubber-ring.jpeg"],
		["sand-castle.jpeg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: fadeSlideShow.sync
})

Then simply add the red code (don't miss the added comma after the togglerid value) to each of the two slideshows as shown.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.