Advanced Search

Results 1 to 6 of 6

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

  1. #1
    Join Date
    Feb 2008
    Location
    Idaho
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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 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 ]

    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 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 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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2008
    Location
    Idaho
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Thanks

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,134 Times in 3,098 Posts
    Blog Entries
    12

    Default

    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:

    Code:
        <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:

    Code:
    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
    }
    Last edited by jscheuer1; 02-16-2008 at 11:18 PM. Reason: code refinement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2008
    Location
    Idaho
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up oh WOW

    That absolutely did the trick!

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

  6. #6
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •