Ultimate Fade In Slideshow 2.4 Help!! PNG Alpha Trans Not Working!

**nicholasbianco23** · 04-19-2011, 11:41 PM

1) Script Title: Ultimate Fade-In Slideshow 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Dear Ladies and Gentlemen. I have an enormous problem that I desperately need your wisdom to resolve. I am working on a website for a local restaurant and I am required to have an image slideshow. You can see it here...

http://www.embellishcustoms.com/bradysnew/

I did some looking around and it seems that there is a fix to be able to use alpha transparency and pngs when using this script, but there is only a fix available for version 1.51 (to my knowledge). I tried to find the same area where John wanted me to put the fix into on the previous version, but I could not locate it in the new 2.4, The post I am referring to is located here...

http://www.dynamicdrive.com/forums/s...ad.php?t=29499

I need your help. I want to use alpha transparency for my images, now there is a huge black block around all of them, making it look very unpleasant. If possible, can you please take a look at my situation and provide some guidance and direction? I would eternally appreciate the help. I am looking forward to your responses. Thank You.

- Nicholas

**azoomer** · 04-20-2011, 02:37 AM

adding some css like this may work:

Code:

#fadeshow1, #fadeshow1 .gallerylayer {
 background-color: none !important;
}

**nicholasbianco23** · 04-20-2011, 02:44 AM

I just inserted the css you provided into my index.html stylesheet and it did not work... thanks for the attempt. Maybe im placing the css in the wrong spot? Somewhere in the external javascript code maybe? here is my html...

Code:

<html>

<head>
<title>Brady's At The Station! - Ramsey's Only Authenitc Irish Restaurant and Bar. - www.bradysatthestation.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate 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">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [635, 485], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["2.png", "", "", ""],
		["1.png", "", "", ""],
		["3.png"],
		["4.png", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>
<style>
	
	body {
		margin: 0px;
		background-image: url('mainpagebg.jpg');
		background-repeat: no-repeat;
		background-position: absolute;
		background-color: #000000;
	}
	
	#logo {
		position: absolute;
		top: 0px;
		left: 0px;
	}
	
	#navigation {
		position: absolute;
		left: 600px;
		top: 0px;
	}
			
	#facebook {
		width: 600px;
		height: 50px;
		position: absolute;
		left: 600px;
		top: 105px;
	}
	
	#maintable {
		position: absolute;
		top: 150px;
		left: 5px;
	}
		
	#maintext {
		font-family: Calibri;
		font-size: 12pt;
		color: #FFFFFF;
		vertical-align: top;
	}
	#mainright {
		width: 635px;
		vertical-align: top;
	}
	
	#fadeshow1, #fadeshow1 .gallerylayer {
 		background-color: none !important;
	}
	
</style>
</head>

<body>
<div id="logo"><img src="logo.jpg"></div>
<div id="navigation">
<table cellpadding="0" cellspacing="0" height="100"><tr>
<td><img src="home1.png" class="domroll home2.png"></td><td><img src="photos1.png" class="domroll photos2.png"></td><td><img src="menu1.png" class="domroll menu2.png"></td><td><img src="specials1.png" class="domroll specials2.png"></td><td><img src="parties1.png" class="domroll parties2.png"></td><td><img src="contactus1.png" class="domroll contactus2.png"></td>
</tr></table>
</div>
<div id="facebook">
<p align="right"><img src="facebookstuff.png"></p>
</div>
<div id="maintable">
<table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr>
<td id="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur dictum quam, ac viverra enim convallis sit amet. Vestibulum in leo ut diam venenatis auctor. Sed eu sapien lectus, ut tincidunt eros. Maecenas consectetur bibendum felis, molestie tempus quam tempor non. Pellentesque molestie, est in convallis molestie, nibh orci congue sem, in cursus ante elit in lectus. Vivamus et leo at tortor ullamcorper pretium. Mauris fringilla convallis purus dapibus laoreet. Vivamus velit erat, bibendum vitae tincidunt ac, egestas eget ligula. Sed scelerisque leo nec tortor sollicitudin ullamcorper. Nullam ut elit at orci varius scelerisque sit amet ac odio. Pellentesque velit augue, sodales et malesuada ac, placerat mattis leo. Proin posuere leo in quam egestas vitae consectetur arcu semper. Proin convallis purus ut erat pretium volutpat tincidunt nulla faucibus. Vivamus elit erat, vulputate eget dapibus vel, egestas non ante. Vestibulum lacinia, augue at commodo pretium, lectus tortor ullamcorper diam, in euismod nisi justo at felis. Quisque vitae felis diam, et malesuada leo. Nunc lacinia porttitor magna, rhoncus vehicula magna congue varius. Nulla cursus eros ac enim ultricies tempus bibendum lectus porta. Phasellus feugiat dolor et lectus porta eu volutpat nulla tempor. Donec vitae erat diam, a vestibulum eros.

Mauris consectetur magna id quam aliquam gravida. Nunc vitae dolor nec lacus viverra mattis. Phasellus at risus eu sem pulvinar porttitor. Praesent posuere venenatis eros, et vulputate lacus vestibulum nec. Ut at dui non magna eleifend imperdiet blandit sed massa. Aenean et convallis orci. Fusce sed urna quis augue vestibulum egestas. Etiam elementum egestas tincidunt. Curabitur nec metus vel eros gravida adipiscing. Suspendisse arcu velit, fermentum eu ultrices et, mattis fringilla quam. Sed quis nulla sed tellus adipiscing pellentesque. Sed lobortis malesuada erat vel imperdiet.

Curabitur commodo sapien quis leo pellentesque volutpat. Nunc facilisis iaculis quam et porttitor. Phasellus consectetur mauris vel mauris commodo quis eleifend sem cursus. Etiam eget massa vel ante aliquam sollicitudin in vel mauris. Mauris orci nisl, tempor at laoreet tempus, molestie sit amet purus. Nullam posuere justo quis sem cursus a vehicula velit rhoncus. Vestibulum pellentesque tristique justo sed bibendum. Phasellus id nisl arcu, id vehicula massa. Maecenas facilisis tristique velit id pellentesque. Fusce eu sapien odio.

Sed sodales quam ut lectus mollis fringilla. Curabitur volutpat malesuada nibh et tempor. Maecenas eget libero eu nulla mattis faucibus vitae ac tortor. Nullam vitae arcu eget nisi dignissim pharetra. Pellentesque auctor, metus id luctus accumsan, ligula elit viverra turpis, in accumsan velit dolor quis odio. Morbi ac ipsum ut arcu pulvinar malesuada a sit amet ligula. Phasellus condimentum quam risus, vitae semper metus. Nam condimentum, orci nec fringilla scelerisque, lectus erat varius quam, sit amet mollis ante nunc at tellus. Fusce et libero est, vitae sagittis velit. Etiam a nibh quis arcu suscipit placerat sit amet vitae magna. Integer in vestibulum felis. Vivamus molestie erat quis lectus pellentesque id ultricies sem fermentum.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque et ante ut erat porttitor mattis eget ut lorem. Integer quis lacus turpis. Nullam convallis ullamcorper tristique. Aenean et sapien leo, a malesuada enim. Morbi sit amet venenatis odio. Phasellus faucibus turpis quis arcu condimentum et sollicitudin nisl scelerisque. Vivamus urna magna, rhoncus quis commodo non, congue sed erat. Pellentesque vel iaculis leo. Morbi sed elit risus. Nulla ultrices lacinia nulla vitae pharetra. 
</td>
<td id="mainright">
<div id="fadeshow1"></div>
</td>
</tr></table>
</div>
<script src="chrisdomroll.js"></script>
</body>

</html>

**azoomer** · 04-20-2011, 02:59 AM

True enough!
Try "background" instead of "background-color" like this:

Code:

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

If that doesn't do it I would try "transparent !important" instead of "none !important"

edit:
trying to validate the css on the page I get this error: Value Error : background-color none is not a color value : none none
so It seems my initial suggestion is wrong. It works in firebug though. Try transparent instead of none and see if it works and validates. In any case there may be some strangeness with the alpha trans in ie6, if you worry about that.

**nicholasbianco23** · 04-20-2011, 03:16 AM

It works perfectly in Firefox, but looks terrible still in Internet Explorer. It rounded the corners...ha! I really appreciate it, but I am still no where if it only works in firefox..

I uploaded the new index file.

http://www.embellishcustoms.com/bradysnew/

**azoomer** · 04-20-2011, 06:45 AM

Yes indeed it looks weird in IE. It may be difficult or impossible to get IE to handle fading of alpha transparency. So if you must have the look with the shadow, you could probably create the shadow as a background image and put it in a wrapper with some padding around the fadeshow1 div. It would be easier to get IE to handle a static image with transparency. Then you could put the images without the shadow in the fadeshow.

**sam2011** · 04-20-2011, 07:30 AM

I've used coin slider slideshow and lightbox in a single application page. All .js files and .css files are linked within head tags but they are not working unless one is commented out. I think some code in jquery.js (for slide show) and prototype.js (for slideshow) are coinciding. How to search exactly which code is accountable for the coexistence? Please help.

**jscheuer1** · 04-20-2011, 08:48 AM

I would suggest using an HTML 5 DOCTYPE with this, though that might not be important (addition highlighted):

Code:

<!DOCTYPE html>
<html>

<head>
<title>Brady's At The Station! - Ramsey's Only Authenitc Irish Restaurant and Bar. - www.bradysatthestation.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate 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">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [635, 485], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["2.png", "", "", ""],
		["1.png", "", "", ""],
		["3.png"],
		["4.png", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""/*@cc_on @*//*@if(@_jscript_version >= 5),
	oninit: function(){
		if(jQuery.browser.version < 9){
			var gs = this.setting;
			gs.$gallerylayers.find('img').css({display: 'block', width: gs.dimensions[0], height: gs.dimensions[1]}).each(function(){
				this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')";
				this.src = 'transparent_1px.gif';
			});
		}
	}@end @*/
})

</script>

What makes it work is the added code to the on page call, also highlighted. You may have to scroll the code block to see it all.

You will need a transparent .gif image (In Firefox, right click and 'save link as ....'):

http://home.comcast.net/~jscheuer1/s...parent_1px.gif

Put it in the same folder as the page, or put its path in the script there. If using a relative path, it should be relative to the page.

About jQuery and Lightbox, you would need to update the version of Prototype and its helper scripts. But it really makes much more sense to use a jQuery based Lightbox like ColorBox or FancyBox.

**nicholasbianco23** · 04-20-2011, 04:09 PM

John Your Amazing. Thank you so much for the prompt reply and fix! Works great!!

**azoomer** · 04-20-2011, 06:18 PM

Great fix.

Thread: Ultimate Fade In Slideshow 2.4 Help!! PNG Alpha Trans Not Working!

Thread Tools

Search Thread

Ultimate Fade In Slideshow 2.4 Help!! PNG Alpha Trans Not Working!

Thanks but no go

The Following User Says Thank You to azoomer For This Useful Post:

Half Way There!

The Following User Says Thank You to jscheuer1 For This Useful Post:

Whoohoooo!!

Bookmarks

Bookmarks

Posting Permissions