Trying to use PNG files in Ultimate Fade In Slideshow v2.0

[Frank Balderrama]

1) Script Title: Ultimate Fade In Slideshow v2.0

2) Script URL (on DD):

3) Describe problem:

1. trying to use png files in slideshow
2. removed background colors in fadeslideshow.js
3. the png files now show up without a background but the first image doesn't fade out till the third image loads

Example: http://b--design.com/MajongTest

[jscheuer1]

Yes. The slideshow needs background. You can often use the same background as - say the page. At least that's usually what folks want in these cases. So say the background image for the page is bg.jpg. And let's say your slideshow is in a div with an id of fadeshow1. Then you can use overriding style in a stylesheet:

#fadeshow1, #fadeshow1 .gallerylayer {
	background-image: url(bg.jpg) !important;
}

But that usually won't line up right with the background for the page. So you can use the background-position property to line it up. But many pages are centered, so although you can predict what the vertical offset should be, you cannot do the same for the horizontal. Some javascript can be used in cases like that. However, depending upon the specifics of the page this can vary.

So, as you see it's somewhat of a custom fit for each situation. I have worked out code that can, when given certain information and when customized to how the show appears on the page in relation to the background you want featured, will do the heavy lifting for you. For instance, for that test page, add the highlighted as shown:

 . . . mate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
jQuery(function($){ // customized for Ma Jong's test page

	var wrapperid = 'fadeshow2', // set wrapper id the same as the slideshow
	backcolor = 'white', // set background color as fall back, should be same as that for the background parent or white
	container = $(document), // slideshow's background parent
	bgwidth = 241, bgheight = 2316, // set variables for background image's dimensions, not used in this case
	bgimsrc = 'http://b--design.com/MajongTest/images/large-bricksNEW.jpg'; // set container's background image

	//////////////////// No Need to Edit Below ////////////////////

	var $show = $('#' + wrapperid), w, ch, newstyle, thestyle, // get slideshow wrapper div, reserve some variables
	topcoord = -$show.parent().offset().top, sw = $show.outerWidth(); // since they won't change, set them now

	$show.bind('repositionEvent', function(){ // function to write and install overriding styles for slideshow baground
		w = container.width();
		newstyle = '<style title="' + wrapperid + 'posbg" type="text/css">#' + wrapperid + ', #' + wrapperid + ' .gallerylayer {' +
		'background: ' + backcolor + ' url(' + bgimsrc + ') ' + (sw - w) / 2 + 'px ' + topcoord + 'px 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 mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [880, 565], //width/height of gall . . .

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

Also I notice that there's a syntax error on that page. It will only affect IE 7 and less. But here:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [880, 565], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		
		["images/HomeAnimation/home1.png"],
		["images/HomeAnimation/3.png"],
		["images/HomeAnimation/4.png"],
		["images/HomeAnimation/5.png"],
		["images/HomeAnimation/6.png"],
		["images/HomeAnimation/7.png"],
		["images/HomeAnimation/8.png"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 600, //transition duration (milliseconds)
	
})

See that red comma? Technically it's not allowed (no comma allowed after the last property of an object). All current version browsers will error correct that for you. But IE 7 and less will not.

[Frank Balderrama]

John,

Thanks for the great solution!

http://b--design.com/MajongTest/

Also, thanks for spotting the syntax error

This is my first experience with this forum and I'll be recommending it to all of my colleagues

I'll look into your graphics section to see if I can help to any posted problems

Frank