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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help - urgent -Fading rotating images

    Hi
    I usually work in html, but I am trying to put up rotating images that fade. I found some Javascript coding but it isn't working correctly. I only see the first image and it fades but nothing happens after that. This is the code I have:
    Code:
    <script language="JavaScript">
     
    <!-- Begin
     
    var slideShowSpeed = 5000;
     
    var crossFadeDuration = 3;
     
    var Pic = new Array();
     
     
    Pic[0] = 'image1.jpg'
    Pic[1] = 'image2.jpg'
    Pic[2] = 'image3.jpg'
    Pic[3] = 'image1.jpg'
    Pic[4] = 'image2.jpg'
     
    // 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);
    }
    //  End -->
    </script>
     
    <body link="Red" vlink="Red" alink="Red" leftmargin=0 topmargin=0 bgcolor="Black"onLoad="runSlideShow()">
     
    <img src="images/image1.jpg" alt="" name="SlideShow" id="SlideShow" width="300" height="200" border="0" align="left">
    Can some assist me twith this?

    Thanks, Lisa
    Last edited by LisaJean; 08-23-2011 at 01:00 PM.

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for sending that through - is there nothing simpler. As I mentioned I normally deal in html and when I copy the coding you recommend - it's a bit over my head...

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    The code as posted does basically work, even though it is a very old script, with a lot of old or deprecated stuff in it. Nevertheless, the images do swap OK in all browsers. They will cross-fade in IE, but not in other browsers, as blendTrans is an MSIE proprietary filter (which has long been deprecated by Microsoft, in favour of its other Basic or Alpha filters).

    If you need cross-fading to happen in all browsers, you would need to implement the CSS3 opacity property, which works in modern browsers (which includes IE9). But for IE versions before 9 which do not support CSS3 opacity, it is usual to implement the alpha filter as a substitute. If you want to see how that's done, just Google for a tutorial on the subject. Here's a couple:
    http://www.cryer.co.uk/resources/jav...2slideshow.htm
    http://www.switchonthecode.com/tutor...fade-animation

    But if your images are not even swapping OK with the code you posted, try checking your image filenames and path.


  •  

    Posting Permissions

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