Skip navigation
Helen Marino
Currently Being Moderated

Add fade to rotating image javascript

Jun 29, 2012 6:15 AM

I have managed to get a tating image working with the following javascript:

 

<script type="text/javascript">

(function() {

    var rotator = document.getElementById('rotator'); 

    var imageDir = '';

    var delayInSeconds = 5;                           

    var images = ['h-images/homepage.jpg', 'h-images/rentalspage.jpg', 'h-images/investpage.jpg'];

    var num = 0;

    var changeImage = function() {

        var len = images.length;

        rotator.src = imageDir + images[num++];

        if (num == len) {

            num = 0;

        }

    };

    setInterval(changeImage, delayInSeconds * 1000);

})();

</script>

 

the page is www.helenmarino.com/test.html (you may have to refresh the page)

 

I am surprised I managed to get this far so any simple code added to make the images fade nicely would be greatly appreciated.

 

many thanks

 

Helen

 
Replies
  • Currently Being Moderated
    Jun 29, 2012 6:55 AM   in reply to Helen Marino
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2012 8:30 AM   in reply to Helen Marino

    I like jQuery Cycle.

    http://jquery.malsup.com/cycle/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 3:03 PM   in reply to Helen Marino

    Download the Cycle plug-in script and save it to your local site folder.  I prefer to keep scripts in my Scripts folder but that's up to you.

    http://jquery.malsup.com/cycle/download.html

     

    jQuery has 3 basic parts to it:

    • the core code library which you ref in your <head>
    • the plug-in script & css (if any) which you ref in your <head>
    • the function code inside <script> tags -- I prefer to put this above closing </body> tag.

     

    <head>

     

    <!-- jQuery latest core library -->

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

    </script>

     

    <!-- Cycle plugin -->

    <script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>

     

    </head>

     

     

    <body>

     

    <div class="slideshow">

         <img src="image1.jpg" width="200" height="200" alt="description" />

         <img src="image2.jpg" width="200" height="200" alt="description" />

         <img src="image3.jpg" width="200" height="200" alt="description" />

         <img src="image4.jpg" width="200" height="200" alt="description" />

    </div>

     

    <!--Cycle function code-->

    <script type="text/javascript">

    $(document).ready(function() {
        $('.slideshow').cycle({
    fx: 'fade'
    });
    });
    </script>

     

    </body>

     

    That's all there is to it.  If you want anything fancier, look at Cycle's More Demos & Examples near the bottom of their home page.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 4:43 PM   in reply to Helen Marino

    Everything looks fine except I don't see the jquery.cycle.js file on your remote server.  Did you upload it?

     

    404 Not found

    <script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>

     

     

    Nancy O.

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 9:46 AM   in reply to Helen Marino

    What did you name your script?

    Is it inside the Scripts folder? (uppercase S)

    The devil is in the details...

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 1:39 PM   in reply to Helen Marino

    I sometimes get timed out by my server or when my internet connection becomes slower than normal.  It's usually a temporary glitch.  Try uploading your files again.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 1:59 PM   in reply to Helen Marino

    Boils down to a path/naming problem.

     

    Change this in your page:

     

    <!-- Cycle plugin -->

    <script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>

     

    to this: 

     

    <!-- Cycle plugin -->

    <script type="text/javascript" src="jquery.cycle.all.js"></script>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 3:11 PM   in reply to Helen Marino

    From this page:

    http://jquery.malsup.com/cycle/int2.html

     

    <!--Cycle function code-->

    <script type="text/javascript">

    $(document).ready(function() {

    $('.slideshow').cycle({
        fx:     'fade',
        speed:   800,  //speed in milliseconds
        timeout: 3000,
        next:   '.slideshow',
        pause:   1
    });

    </script>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 3:42 PM   in reply to Helen Marino

    add this on line 134.

    });

     

     

    N

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 4:00 PM   in reply to Helen Marino

    Looks great! 

     

     

    N

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points