Ultimate Fade-in slideshow -- need previous slide to disappear immediately

[wschaefer]

1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/forums/forumdisplay.php?f=2


3) Describe problem: Using .png files with transparent backgrounds. Previous slide shows through in back of next slide until full transition is made.

Can I get rid of previous slide in script? in css?

Need for presentation tomorrow afternoon. http://www.ilovelakeoconee.com/testsite/

Thank you!

[jscheuer1]

I haven't tried this out:

http://www.dynamicdrive.com/forums/s...212#post246212

but if it works, I'd say go for it. Don't miss the last post that claims to solve the very problem you're having.

If that doesn't work out for you, there is a way using css to make the background of the division behind the slideshow be the background for each of the slide images. With your layout and styles it would be complicated, but I'm sure it's doable and that it would fix the problem seamlessly.

I need to break for dinner, etc. Too bad you're on such a short deadline. If I have more time later I'll check back and see what luck you've had with the method in that thread I linked you to.

[wschaefer]

Thank you John!!!!

That worked. It makes the other slide show a little jarring, but I will play around with the fade duration to minimize.

If there is a .css way to work it out on one and not the other, that would be great, but since this is just a layout, I can talk through it.

I so appreciate your help! And so quickly. Very grateful, I am

Wendy

p.s. If you do stumble upon a .css fix, I'd love to know...

[jscheuer1]

I see what you mean. In the meantime, you could always use two copies of the script. you would just have to change every reference to fadesSlideShow in one of them to fadeSlideShow2.

Using css it can be tailored to just one show. But to do that with the second show we would need a javascript assist. The background position in the slideshow that the ilovelakeoconee.com/testsite/images/waterfooter.png image needs to line up with it's counterpart's position in the widecontainer division is what we want to calculate. The top coordinate would be fairly constant, but might vary slightly by browser. The left coordinate may too and will vary with the width of the window at times - when the window is too narrow, the background image for the widecontainer division shifts horizontally.

To get a rough idea of how it would look though, revert to the original slideshow script temporarily and add this to the stylesheet:

#fadeshow2, #fadeshow2 .gallerylayer {
	background-color: white !important;
	background-image: url(http://www.ilovelakeoconee.com/testsite/images/waterfooter.png) !important;
	background-position: -205px 110px !important;
	background-repeat: no-repeat !important;
}

We just need to get it to line up better. With a background image like that, to at least +- 2px might be undetectable. Ideally we can get it to line up exactly. But as I say that will require a javascript assist.

I'll play around with that and let you know what I come up with.

[jscheuer1]

OK, here's the 'ultimate' solution for that particular page -

Step 1 - Revert to the original version of the slideshow script.

Step 2 - Put this in the stylesheet for the page. The first part is for fadeshow1, the first slideshow because we reverted to the original script with it's black background. The second part is only needed in IE 7, otherwise it messes up on the next step:

#fadeshow1, #fadeshow1 .gallerylayer {
	background: white !important;
}

#fadeshow2 {
	width: 177px;
	height: 243px;
}

Step 3 - Before the newFadeShow call for fadeshow2 insert the highlighted as shown:

	descreveal: "ondemand",
	togglerid: ""
})

jQuery(function($){ // customized for ilovelakeoconee.com fadeshow2

	var wrapperid = 'fadeshow2', // set wrapper id the same as the slideshow
	backcolor = 'white', // set background color
	container = $('#widecontainer'), // slideshow's background parent
	bgwidth = 1500, bgheight = 290, // set variables for background image's dimensions
	bgimsrc = 'http://www.ilovelakeoconee.com/testsite/images/waterfooter.png'; // set container's background image

	var $show = $('#' + wrapperid), off, cmid, ch, newstyle, thestyle, // get slideshow wrapper div, reserve some variables
	topcoord = container.innerHeight() - $show.position().top - bgheight; // since it won't change, set it now

	$show.bind('repositionEvent', function(){ // function to write and install overriding styles for slideshow baground
		off = $show.position(); cmid = container.innerWidth() / 2;
		newstyle = '<style title="' + wrapperid + 'posbg" type="text/css">#' + wrapperid + ', #' + wrapperid + ' .gallerylayer {' +
		'background: ' + backcolor + ' url(' + bgimsrc + ') ' + (cmid - off.left - bgwidth / 2) + 'px ' + topcoord + 'px no-repeat !important;}<\/style>';
		if((thestyle = $('style[title=' + wrapperid + 'posbg]')).size()){
			thestyle.replaceWith(newstyle);
		} else {
			$('head').append(newstyle);
		}
	});

		$show.trigger('repositionEvent'); // set the show's background
		$(window).resize(function(){$show.trigger('repositionEvent');}); // do it again should the window be resized

});

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [177, 243], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/floa . . .

That's it! There's nothing for you to configure.

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

[wschaefer]

Thank you for all the time you've taken with this!!!

I may not have time to do it today, but I will play with this tonight or tomorrow and let you know how it goes.

Wendy

[wschaefer]

Hi again,

I went ahead and followed everything in your last post. It worked. But it all looked exactly the same as the first fix (transitions rough on main slider). The other thing I noticed, on fadeshow2, when I enlarged or reduced the window, there would be white in the background momentarily.

So I went back to the first fix.

I will play around with this, but I'm where I need to be at the moment. Again, thank you so much.

Wendy

[jscheuer1]

If it was the same as the first fix, perhaps you neglected to revert to the official version of the script, or the modified one was still in the browser's cache. With the official version of the script it's not jumpy as with the modified version.

I didn't notice any white space on resize of the browser window either. Not sure what could be causing that. What browser(s) are you using?

[wschaefer]

I was using safari. I've checked it in Firefox too. But now that I've seen it in IE, I might have to get rid of fadeshow2....really doesn't look good. IE can't do anything!

I did revert to the original script, and thought I dumped the cache....I'll try it again.

[jscheuer1]

I tested in IE 9, 8, 7, and 6. Looked fine in all but 6, which doesn't do alpha opacity .png without a filter. Not only was that messed up, but also the layout. But it was fine in IE 7 and greater.

The only other browsers I tested in were Firefox and Opera. I just looked in Safari Win and Chrome, I don't have a Mac. They were both fine except Safari was a little shaky, the page literally shook back and forth a little when resizing the window. But no white showing in any of them.

It may be differences in computers rather than browsers though. But I can put up a demo of my code if you like.