Skip navigation
Helen Marino
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

2382 Views   19 Replies   Latest reply: Nancy O., Jul 1, 2012 4:00 PM
 
Replies
  • Jon Fritz II
    Currently Being Moderated
    1. Jon Fritz II,
    Jun 29, 2012 6:55 AM   in reply to Helen Marino
    Report

    Here's one that might work for you: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Jun 29, 2012 8:30 AM   in reply to Helen Marino
    Report

    I like jQuery Cycle.

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Helen Marino
    Currently Being Moderated
    3. Helen Marino,
    Jun 30, 2012 2:14 PM   in reply to Nancy O.
    Report

    Thanks - this looks great.

     

    Sorry but I am a real novice at javascript - only thing is the instructions are not that clear - I have opened the file - do I now save it in

    the first head section of my html page?

     

    Also I can't work out which bit I specify my images in?  Or with the full version of the cycle how I determine it so I just have a fade option with the ability to scroll to next page?

     

    Maybe this is beyond my limits?  Are there any detailed notes on how to do this?

     

    Thanks

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

    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:
  • Helen Marino
    Currently Being Moderated
    5. Helen Marino,
    Jun 30, 2012 3:08 PM   in reply to Nancy O.
    Report

    Great, thanks - will have a go now! 

     
    |
    Mark as:
  • Helen Marino
    Currently Being Moderated
    6. Helen Marino,
    Jun 30, 2012 3:36 PM   in reply to Helen Marino
    Report

    Thanks - I have:

     

    1) Put this in my head:

     

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

     

    2. Put this in my body:

    <div class="slideshow">

         <img src="h-images/homepage.jpg'" width="600" height="298" alt="description" />

         <img src="h-images/rentalspage.jpg'" width="200" height="298" alt="description" />

         <img src="h-images/invest.jpg'" width="200" height="298" alt="description" />

    </div>


    <!--Cycle function code-->

    <script type="text/javascript">

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

     

    3. Added the downloaded file and saved as a file in scripts folder.

     

    You can now see the it on www.helenmarino.com/test.html (will need to refresh) - but I think I have gone wrong somewhere by not refering to where it should be on my html page?  I want it where the current main image is.

     

    Sorry for being such a pain - you have made this v easy to understand, I'm just missing what I should put where I actually want the image to go.

     

    Many thanks - I will have another look now in the morning.

    Helen

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

    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:
  • Helen Marino
    Currently Being Moderated
    8. Helen Marino,
    Jul 1, 2012 3:55 AM   in reply to Nancy O.
    Report

    Hi, yes I did upload it under a script folder - and have also now uploaded it again under the main folder - but the page does not appear to be working?

     

    Thanks

     

    Helen

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

    What did you name your script?

    Is it inside the Scripts folder? (uppercase S)

    The devil is in the details...

     

     

    Nancy O.

     
    |
    Mark as:
  • Helen Marino
    Currently Being Moderated
    10. Helen Marino,
    Jul 1, 2012 12:16 PM   in reply to Nancy O.
    Report

    Hi Nancy

     

    I started again from the start as I had not used a capital S for my scripts folder.

     

    I saved the file under the Scripts folder as    jquery.cycle.all.js

     

    I then tried to uplaod it and got an error message:

     

    file activity not incomplete. 1 file or folder(s) were not completed

     

    Can you help please?

     

    Thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    11. Nancy O.,
    Jul 1, 2012 1:39 PM   in reply to Helen Marino
    Report

    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:
  • Helen Marino
    Currently Being Moderated
    12. Helen Marino,
    Jul 1, 2012 1:48 PM   in reply to Nancy O.
    Report

    Hi Nancy

     

    I can upload all my html files okay - it just seems to be this js one. I tried loads of times.

     

    I have just moved it to my main folder instead of the scripts folder and it uploaded okay.

     

    Some success then - if you refresh the www.helenmarino.com/test.html page then the images do appear now - but not in a slideshow and in the wong place?

     

    Any comments please?

    Thanks

     

    Helen

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    13. Nancy O.,
    Jul 1, 2012 1:59 PM   in reply to Helen Marino
    Report

    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:
  • Helen Marino
    Currently Being Moderated
    14. Helen Marino,
    Jul 1, 2012 2:17 PM   in reply to Helen Marino
    Report

    You are a genius!  Thanks so much for your help with this.

     

    And if I dare ask if I want to slow the slideshow down - where do I amend this?

     

    And maybe for another day but I wanted to add the ability to manually scroll forward on the slides is this a whole new process?

     

    Thanks

     

    Helen

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

    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:
  • Helen Marino
    Currently Being Moderated
    16. Helen Marino,
    Jul 1, 2012 3:35 PM   in reply to Nancy O.
    Report

    Great thanks - this is exactly what I wanted - however it is saying there is a syntax error on line 134.

     

    I have uploaded it as www.helenmarino.com/test2.html

     

    (refresh screen please)

     

    Thank you again - any comments much appreciated.

     

     

     

     

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

    add this on line 134.

    });

     

     

    N

     
    |
    Mark as:
  • Helen Marino
    Currently Being Moderated
    18. Helen Marino,
    Jul 1, 2012 3:48 PM   in reply to Nancy O.
    Report

    You are definitely a genius.

     

    Thanks so much.

     

    All my problems solved.

     

    Helen

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

    Looks great! 

     

     

    N

     
    |
    Mark as:
Actions

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