Ultimate Fade-In Slideshow : png problem

**Smivvy** · 12-07-2010, 09:54 PM

1) Script Title: Ultimate Fade-In Slideshow ( v 2.4 )

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

3) Describe problem: Using png instead of jpg -
Hi Guys, can you help with a little problem I'm having with the slideshow script - I need to use png's with transparent backgrounds for the images instead of jpg's , as the fade in images are positioned on an image background. If the background was a solid color I'd be fine ! Is there a code snippet I need to put in the js to recognize the png's and not have a black background appear in place of the transparency ? The current test page here - www.eyenesspartners.com/andys/9.htm , the offending images bottom right.
Thanks !

**Aimkat** · 12-09-2010, 05:36 PM

I'm having the same problem. Is there any way to fix this?

**jscheuer1** · 12-09-2010, 06:01 PM

In Smivvy's case the background image is all one solid color except at its edges where the slideshow is not and shouldn't be. So for that, it's easy. Just set the background color override in style for that show to match that of the image's main color:

Code:

<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
	background-color: #eaebea!important;
}
</style>

Put that in the head of the page or put its rule in an existing stylesheet. The !important keyword is required to prevent the script from switching it back to black.

For Aimkat, it might be as simple, though a different color probably. But likely there's a more complex background image that needs to be positioned to match up with one beneath it. Each layer and the show itself needs background. Otherwise slides with transparent sections will cause bleed through. Unless those transparent sections are in exactly the same spot in each image that is.

Sometimes the layout is too fluid to permit positioning like I'm mentioning. So to see if it could even work, and to give more than just general suggestions if it can:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**Aimkat** · 12-09-2010, 06:22 PM

I wish mine was simple enough to just change the background color, but I have an image in the background that I want to show through the slide show. Here's a link to the still-in-progress site I'm working on: http://74.52.114.162/~newworld/

**jscheuer1** · 12-10-2010, 01:36 AM

Replace this in pages.css:

Code:

/** Fadeshow Slide Show **/

#fadeshow1 {
	background-color: transparent!important;
}

with:

Code:

/** Fadeshow Slide Show **/

#fadeshow1, #fadeshow1 .gallerylayer {
	width: 980px;
	height: 250px;
	background: transparent url(images/bkgd.jpg) center -207px !important;
}

**Smivvy** · 12-13-2010, 01:47 AM

Thank you for the fix ! Could I use the transparent fix if I was using the same image rollover on a different background of, say, a swirled effect ? Or if the rollover was positioned over the edge of the faded background image, say further to the left ?

**jscheuer1** · 12-13-2010, 02:24 AM

I'd say probably no, probably not the same fix. It could. Something similar though most likely, as long as the layout doesn't preclude it from working. What the:

Code:

#fadeshow1, #fadeshow1 .gallerylayer {
	width: 980px;
	height: 250px;
	background: transparent url(images/bkgd.jpg) center -207px !important;
}

does is set as a background image for the target division and the two script generated gallery layer divisions as the same image that is behind the slideshow. In addition to that it positions said background to line up with the image behind the show.

If everything else is the same, it could work simply by substituting the new image. But if the layout changes or if the image is different in some consequential way, additional tweaks/changes to the style rules may be required to get everything to line up again. And if things change too much with the overall layout, it might not be possible at all with a different or even the same background image.

**Smivvy** · 12-13-2010, 08:44 AM

Hey, thanks for the prompt reply. I reckon that I can work with your fix and not worry about moving the image to the left. My client has a new layout submitted and the moving of the image will not be a problem. Just thought that a reply and the subsequent thank you would be appreciated - so - thanks !!
Appreciate your input and help.
Smivvy.

**Aimkat** · 12-13-2010, 04:18 PM

Originally Posted by jscheuer1

Replace this in pages.css:

Code:

/** Fadeshow Slide Show **/

#fadeshow1 {
	background-color: transparent!important;
}

with:

Code:

/** Fadeshow Slide Show **/

#fadeshow1, #fadeshow1 .gallerylayer {
	width: 980px;
	height: 250px;
	background: transparent url(images/bkgd.jpg) center -207px !important;
}

That worked great. Thank you so much!

**almoes** · 12-27-2010, 09:52 AM

Hi,

I have exactly the same problem. I use the fader on a div tag which is placed over a background and my pictures have a transparent frame. I tried to apply the code suggested in the post but it doesn't work.

This is the html code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="Style/home.css">

 <script type="text/javascript" src="Lib/Fader/jquery.min.js"></script>
	<script type="text/javascript" src="Lib/Fader/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: "fader",
	    dimensions: [366, 241],
	    imagearray: [
			["http://www.bla.es/Tests/NewWeb/Pics/slideshowhg.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow1.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow2.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow2.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow3.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow4.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow5.png"],
			["http://www.bla.es/Tests/NewWeb/Pics/slideshow6.png"]
		],
	    displaymode: { type: 'auto', pause: 2500, cycles: 0, wraparound: false },
	    persist: false,
	    fadeduration: 700,
	    descreveal: "always",
	    togglerid: ""
	  })
	</script>

</head>
<body>
<div class="main">
	<div class="topBorder"></div>
	<div id="fader"></div>
</div>
	
</body>
</html>

and the last try of css:

Code:

#fader{
width: 366px;
height: 241px;
background-image: url(../Pics/slideshowhg.png) !important;
background-repeat:no-repeat !important;
background-color: transparent !important;
margin-left: 264px !important;
}

I also tried it the css all in one line using the background attribute.

Any ideas how to get rid of the black square? Thanks.