Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with javascript Slideshow and transparent PNG files

    I have a site that I'm trying to build that will have a slideshow of pictures scrolling on the side. I found some javascript code at codelifter.com (http://www.codelifter.com/main/javas...lideshow2.html).

    The pictures in the slideshow are all PNG's using alpha transparency. But, since IE doesn't seem to like PNG's with alpha transparency, I grabbed another piece of javascript from http://homepage.ntlworld.com/bobosola/pnghowto.htm.

    Individually, the scripts work fine. That is, without the PNG transparency fix, the slideshow works fine and without the slideshow, the PNG transparency works great. However, when I try to combine the two, I get a javascript error in the slideshow function telling me that I have an invalid null value. This error occurs on the "document.images.SlideShow.style.filter" statement in the HTML below.

    I cut the HTML down to the bare bones to make it easier to look at. If anyone could look at the scripts and give me a hand in combining the two functions, I would really appreciate it.

    Following is the HTML with the inline slideshow function:

    [HTML]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>slideshow test </title>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />

    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="javascript/correctpng.js" >
    </script>
    <![endif]-->

    <script>
    // (C) 2000 www.CodeLifter.com
    // http://www.codelifter.com
    // Free for all users, but leave in this header
    // NS4-6,IE4-6
    // Fade effect only in IE; degrades gracefully

    // =======================================
    // set the following variables
    // =======================================

    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000

    // Duration of crossfade (seconds)
    var crossFadeDuration = 3

    // Specify the image files
    var Pic = new Array() // don't touch this
    // to add more images, just continue
    // the pattern, adding to the array below

    Pic[0] = 'images/mega_main_image_test1.png'
    Pic[1] = 'images/mega_main_image_test2.png'

    // =======================================
    // do not edit anything below this line
    // =======================================

    var t
    var j = 0
    var p = Pic.length

    var preLoad = new Array()
    for (i = 0; i < p; i++){
    preLoad[i] = new Image()
    preLoad[i].src = Pic[i]
    }

    function runSlideShow(){
    if (document.all){
    document.images.SlideShow.style.filter="blendTrans(duration=2)";
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply();
    }
    document.images.SlideShow.src = preLoad[j].src
    if (document.all){
    document.images.SlideShow.filters.blendTrans.Play();
    }
    j = j + 1
    if (j > (p-1)) j=0
    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    </script>

    </head>
    <body onload=runSlideShow()>
    <div id="mainimage">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="VU" height=386 width=263>
    <img src="images/mega_main_image_test1.png" name='SlideShow' width=263 height=386></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    [/HTML]

    Following is the javascript to correct the PNG transparency for IE:

    Code:
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       var arVersion = navigator.appVersion.split("MSIE")
       var version = parseFloat(arVersion[1])
       if ((version >= 5.5) && (document.body.filters)) 
       {
          for(var i=0; i<document.images.length; i++)
          {
             var img = document.images[i]
             var imgName = img.src.toUpperCase()
             if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
             {
                var imgID = (img.id) ? "id='" + img.id + "' " : ""
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText 
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                img.outerHTML = strNewHTML
                i = i-1
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);

  • #2
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might also have functions and/or variables with the same name but this is a start.

    Remove in red:

    <body onload=runSlideShow()>

    window.attachEvent("onload", correctPNG);


    Add anywhere in one of the scripts:

    window.onload=function(){
    runSlideShow();
    correctPNG()
    }

    You should read this:
    http://www.javascriptkit.com/javatut...iplejava.shtml

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    GPH,
    Thank you very much for your response. I tried your suggestions (deleting the separate "onloads" and adding back the concatenated one. Unfortunately, it still didn't work. When I added the new onload to the slideshow, it still gave me the null value error and when I added it to the PNG transparency javascript, it didn't run the slideshow.

    Thanks for the link to the tutorial as well. I can't swear to it, but I'm fairly certain that this addresses only part of my problem. That's because my (novice) reading of the PNG transparency script looks like it scans the entire HTML for any PNG's and then applies a filter to them to correct the transparency problem. However, the slideshow javascript has required that I move all of the PNG file names to that script - so, I think that the transparency script can't "see" it....

    It seems like if I could call the transparency script as I bump through the slideshow table I would be OK..... That said however, I'm too dumb to be able to figure out how to make that happen.

    Does any of that sound like it could be my problem?

    Thanks!
    Moez

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It looks like the problem is that the correctPNG function converts all img tags whose src ends with "png" with a span element. The slideshow is trying to replace the src of an img tag that doesn't exist anymore.

    The correctPNG function does copy the id of the original img to the new span but it doesn't copy the name. Even if it did you're now dealing with a span and setting the src on a span won't do anything at all.

    IMHO it would be better to rewrite the whole thing or at least update it to use id and set the alpha filter instead of the src if the browser is IE.

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, Mongus. I'm afraid that your answer zipped right over my head. Are you saying that I can just modify the Slideshow script so that apply the alpha filter and forget about the other correctPNG script altoghether?

    If so, that is kind of where I was attempting to go. Unfortunately, I couldn't figure out how to do that. I tried to make the DXImageTransform.... part of the string in the Pic[x] variables, but that didn't work.

    It seemed to me that there should be some place in the Slideshow where I can just apply the filters to the Pic[x] PNG's in a loop and pass them on to the next loop. Unfortunately, the syntax for that was beyond my skills.

    Would you have any ideas for this?

    Thanks,
    Moez

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Same problem...

    I have the exact same problem: see http://forums.digitalpoint.com/showthread.php?t=232756

    Did you find any working solution?


  •  

    Posting Permissions

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