www.webdeveloper.com
Results 1 to 4 of 4

Thread: Rotating Images with Swap Image Behavior not working

  1. #1
    Join Date
    Sep 2011
    Posts
    3

    Rotating Images with Swap Image Behavior not working

    So I followed the instructions here: http://webdesign.pbworks.com/f/swap_images.pdf for setting up a rotating image on a client's webpage. Those directions are identical to the ones I've found on a few other sites, and I can even get it to work when I don't have anything else on the page, but not where I need it. I'm using a Dreamweaver template and that's the only thing I can think would be effecting it. I tried redoing it with all site-root relative paths, thinking that was the issue when the template was applied to each page, but still no luck.

    All the code is still on the site at http://dloeblaw.com/, I just commented out the image itself so it doesn't look bad on the site in the meantime, so you can go there to see it in full context but here's the code in question:
    Code:
    // Comma separated list of images to swap
    
    var imgs = new
    
    Array('images/Supreme-rotatingBanner.gif', 'images/rotatingTestImage.gif'
    
    );
    
    // delay in milliseconds between image swaps 1000 = 1 second
    
    var delay = 3000;
    
    var counter = 0;
    
    function preloadImgs(){
    
    for(var i=0;i<imgs.length;i++){
    
    MM_preloadImages(imgs[i]);
    
    }
    
    }
    
    function randomImages(){
    
    if(counter == (imgs.length)){
    
    counter = 0;
    
    }
    
    MM_swapImage('rotator', '', imgs[counter++]);
    
    setTimeout('randomImages()', delay);
    
    }
    That part is just above the < / script > tag like the directions said.

    Then:
    HTML Code:
    <body onload="preloadImgs();randomImages();">
     <div id="banner">
    
    <img src="../images/banner.jpg" width="161" height="189" />
    
    <img src="/images/Supreme-rotatingBanner.gif" name="rotator" width="485" height="129" id="rotator" />
    
    </div>
    <div id="header">
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a href="../contact.html">Contact</a></li>
    There's the start of the page with the portrait image ("banner.jpg") then the image that should be rotating, given the id and name "rotator."

    I've got plenty of CSS going on in all this too but none of is effecting "rotator" so I can't imagine that's messing with things but I can include that too if someone thinks otherwise.

    This has me really stumped so any help would be awesome!

  2. #2
    Join Date
    Sep 2011
    Posts
    4
    Controlling all the code on the site at http://dloeblaw.com/ I noticed
    only an error in javascript(Only a missed comma) .
    Try to replace from this line:
    MM_swapImage('rotator', '', imgs[counter++]imgs[i]);

    To this:
    MM_swapImage('rotator', '', imgs[counter++],imgs[i]);

    Let me know if it works

    Bye
    Antonio

  3. #3
    Join Date
    Sep 2011
    Posts
    4
    [QUOTE=antonioatt;1173557]Controlling all the code on the site at http://dloeblaw.com/ .
    I noticed
    only an error in javascript(Only a missed comma end a parentesis to delete) .
    Try to replace from line 85 to 89:
    MM_swapImage('rotator', '', imgs[counter++]imgs[i]);

    }

    }


    To this(a comma to add in function call and a parentesis to delete):
    MM_swapImage('rotator', '', imgs[counter++],imgs[i]);

    }

    Let me know if it works

    Bye
    Antonio

  4. #4
    Join Date
    Sep 2011
    Posts
    3
    Thanks for the quick reply. I think that helped narrow down what the problem is but I'm still stumped...

    I have all this code in a template and for some reason the code shows up differently when the template is applied to a page.

    Here's what the template looked like:
    Code:
    // delay in milliseconds between image swaps 1000 = 1 second
    
    var delay = 3000;
    
    var counter = 0;
    
    function preloadImgs(){
    
    for(var i=0;i<imgs.length;i++){
    
    MM_preloadImages(imgs[i]);
    
    }
    
    }
    
    function randomImages(){
    
    if(counter == (imgs.length)){
    
    counter = 0;
    
    }
    
    MM_swapImage('rotator', '', imgs[counter++]);
    
    setTimeout('randomImages()', delay);
    
    }
    
    </script>
    And here's how it showed up in index.html:
    Code:
    // delay in milliseconds between image swaps 1000 = 1 second
    
    var delay = 3000;
    
    var counter = 0;
    
    function preloadImgs(){
    
    for(var i=0;i<imgs.length;i++){
    
    MM_preloadImages(imgs[i]);
    
    }
    
    }
    
    function randomImages(){
    
    if(counter == (imgs.length)){
    
    counter = 0;
    
    }
    
    MM_swapImage('rotator', '', imgs[counter++]imgs[i]);
    
    }
    
    }
    
    function randomImages(){
    
    if(counter == (imgs.length)){
    
    counter = 0;
    
    }
    
    MM_swapImage('rotator', '', imgs[counter++]);
    
    setTimeout('randomImages()', delay);
    
    }
    
    </script>
    So in index.html there's two places where "MM_swapImage" is called, but there's only one in the template. Changing the template to say "MM_preloadImages(,imgs[i]);" - with an extra comma - makes the change you suggested (for some reason) but then that line has an error...

    I'm guessing if I could get Dreamweaver to stop changing the code when the template is applied to a page it would probably work but I'm not sure how to do that.

    Any other help I can get would be awesome!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles