Ultimate Fade-in slideshow with .PNG alpha transparency - IE Bad!

[anexemines]

1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

I'm using this fadeshow in a very delicious manner. I have it using .PNG images with alpha transparency for shadowed borders. The background of the website is fixed so when scrolling the site (http://www.rainsalonandspa.org) looks gorgeous. But only in Mozilla Firefox.

Because of Internet Explorer's lack of support for .PNG images the slideshow images don't allow IE to recognize the alpha transparency and show nasty blackness. [ Open site in IE (http://www.rainsalonandspa.org) ]

Why is Internet Explorer doing this?

Because the slideshow images are not within actual <img> tags. If they were then we would have no problems because there are hacks/fixes (http://www.twinhelix.com/css/iepngfix/) for this.

View page in both Mozilla Firefox and Internet Explorer: [ http://www.rainsalonandspa.org ]

I need some intelligent thinkers for figuring this one out, I do not want to sacrifice the shadowed border just to please IE.

There are fixes (http://www.twinhelix.com/css/iepngfix/) for IE to recognize .PNG alpha transparency but only works if images are in common <img> attribute. I am not a guru with javascript but something tells me this is all fixable.

Ideas?

[jscheuer1]

There is nothing special about your images in the slide show at the top of the page which requires the PNG format. Save as JPG and it will avoid this problem and probably use many less bytes. JPG may exhibit phantom dots in IE though when images are faded. If this happens, you will need to adjust the black on each image, or perhaps (if you are lucky) just use black as the fadebgcolor in the script. If you are really lucky, this won't be an issue with your particular image set when saved as .jpg images.

Otherwise, the script could be modified to use an a tag instead of an image tag and have its display set to block with the image as background in most browsers, IE 6 and less using the alpha image loader filter.

Though simple in concept, it may be difficult to work out the particulars on this.

BTW, IE 7 has no problem with PNG, so you shouldn't use pngfix scripts with it.

[anexemines]

Thanks for the tips - but you are mistaken about the .PNG images in the fadeshow. They have alpha transparency around the edges, if viewed in firefox you will see it. As far as I know .JPG can't have transparency.

Yes, IE 7 may support .PNG alpha transparency, but I too have IE 7 and when viewing my site it doesn't show the transparent borders like Firefox does, just shows the thick black nasty borders because of the images not being in general <a> or <img> tags.

[jscheuer1]

The more I look at this, the more I think something can be done. This worked out well here in local testing -

Place this in the head of the page:


<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<!--[if gte IE 5.5]>
<style type="text/css">
#master0 a {background:none!important;}
</style>
<![endif]-->
<script type="text/javascript" src="media/swfobject.js"></script>
<script type="text/javascr . . .

Use this fadeshow.prototype.populateslide function, replace both of your existing ones with it:


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML="", slideHref="";
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHref=' href="'+this.theimages[picindex][1]+'"'
slideHTML='<a'+slideHref+' target="'+this.theimages[picindex][2]+'" '+
'style="display:block;width:100%;height:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+
this.postimages[picindex].src+'\');background-image:url(\''+this.postimages[picindex].src+'\');border:none;"'+
'title="'+this.theimages[picindex][3]+'"><\/a>'
picobj.innerHTML=slideHTML
}

[anexemines]

That absolutely did the trick!

Much thanks Mr. Scheuer you are quite crafty with that javascript.

[grafikkid]

Hey I read through this thread and tried this fix, but it's not working for me. Would someone mind taking a look at my site and helping me out?

http://www.fencepostmedia.com/beta/ffo/

Thank you very much!