Link to home
Start Free TrialLog in
Avatar of merkhead
merkhead

asked on

Javascript Image/Link Rotator Script - Change Timer function

Hello,

The following script is set up to rotate an image/link in a homepage every 5 seconds. I would like to modify the script so that the image changes once per day (every 24 hours). Currently, if I were to change the
"closeTime+=5;" variable to 86,400 seconds, the image would change once a day, but the user wouldn't know it unless they kept the page open all day! Nice functionality there.

<script language="JavaScript">
<!--
<!-- Hide from old browsers

var i = 1;
banner1= new Image();
banner1.src = "gallery_1.gif";
banner2 = new Image();
banner2.src = "gallery_2.gif";
banner3= new Image();
banner3.src = "gallery_3.gif";
banner4 = new Image();
banner4.src = "gallery_4.gif";
banner5= new Image();
banner5.src = "gallery_5.gif";

links = new Array
links[1] = "http://www.link.com/gallery_1.html"
links[2] = "http://www.link.com/gallery_2.html"
links[3] = "http://www.link.com/gallery_3.html"
links[4] = "http://www.link.com/gallery_4.html"
links[5] = "http://www.link.com/gallery_5.html"

description = new Array
description[1] = "Gallery of the Day 1"
description[2] = "Gallery of the Day 2"
description[3] = "Gallery of the Day 3"
description[4] = "Gallery of the Day 4"
description[5] = "Gallery of the Day 5"

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=5;      // How many seconds til the next rotation
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
            if (i < 11){      // The number 2 is the amount of banners that you have
                  i++;
                  document.banner.src = eval("banner" + i + ".src");
            }
            else{
                  i = 1;
                  document.banner.src = eval("banner" + i + ".src");
            }
            startTime();
      }
        else{
                window.setTimeout("Timer()",1000)}

}

function clickLink(){
      top.location = links[i]
}

function descript(){
      window.status = description[i]
}

// -->

</script>
Avatar of steve_bagnall
steve_bagnall

Hi,

You should use cookies to store information between sessions.  Make a note in the cookie of the image that the use last saw and the day they saw it.   If you need all your users to be looking at the same image then you will need to do something on your server, and I don't know what capabilities you have in this area.  Let me know if you need some code for the cookie solution, or further explaination.

Cheers,
Steve.

Avatar of merkhead

ASKER

Hi Steve,

I don't have much knowledge in the cookie area. If you can throw something together, that would be great! My only concern is if the visitor has cookies disabled. Is a work-around for this?

Thank you!
Sam
Hi,

The following is your code with some additions.  It increments i from 0 - 5, then back to 0 whenever the last time the user visited your site was over a day ago.  To see it working change the line:

var yesterday = new Date(today - (1000*24*60*60));
to
var yesterday = new Date(today - (1));

Which will do it every second.  This can be found in the visit() function, also add an alert(i) somewhere in that function so that you can see it changing.  You can then use this value of i in whatever method you are using to change the images displayed on your page.

Unfortunately if the user has cookies turned off this will not work.  You can check to see if the user has them turned off by using bakeCookie("test", "yes") followed by  if (getCookie("test") =="") etc. and warn them.

HTH

Cheers,
Steve.



<html>
<head>
<script language="JavaScript">
<!--
<!-- Hide from old browsers

var i = 1;
banner1= new Image();
banner1.src = "gallery_1.gif";
banner2 = new Image();
banner2.src = "gallery_2.gif";
banner3= new Image();
banner3.src = "gallery_3.gif";
banner4 = new Image();
banner4.src = "gallery_4.gif";
banner5= new Image();
banner5.src = "gallery_5.gif";

links = new Array
links[1] = "http://www.link.com/gallery_1.html"
links[2] = "http://www.link.com/gallery_2.html"
links[3] = "http://www.link.com/gallery_3.html"
links[4] = "http://www.link.com/gallery_4.html"
links[5] = "http://www.link.com/gallery_5.html"

description = new Array
description[1] = "Gallery of the Day 1"
description[2] = "Gallery of the Day 2"
description[3] = "Gallery of the Day 3"
description[4] = "Gallery of the Day 4"
description[5] = "Gallery of the Day 5"

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=5;     // How many seconds til the next rotation
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
          if (i < 11){     // The number 2 is the amount of banners that you have
               i++;
               document.banner.src = eval("banner" + i + ".src");
          }
          else{
               i = 1;
               document.banner.src = eval("banner" + i + ".src");
          }
          startTime();
     }
        else{
                window.setTimeout("Timer()",1000)}

}

function clickLink(){
     top.location = links[i]
}

function descript(){
     window.status = description[i]
}



      // creates a cookie with the name, value, and days given in the parameters.
      function bakeCookie (name, value, days) {
         // build the expiration date string
         if (!days)
            days = 365;
         var expiry_date = new Date();
         expiry_date.setDate(expiry_date.getDate () + days);
         expiry_date = expiry_date.toGMTString ();

         // build the Set-cookie string
         var cookie_string = name + '=' + escape(value) + '; expires=' + expiry_date;

         // set path to root for all cookies (write only the first part of the web adress)
         cookie_string +=  '; path=/';

         // create/update the cookie
         document.cookie = cookie_string;
      }

      // sent two cookie - UserID and Company Name




// search through the current documents cookie string for a cookie
      // whose name is identical to key.
      function getCookie (key) {
         if (document.cookie == "") return false;
         else {
            // get cookie string and separate into individual cookie phrases:
            var cookieString = "" + document.cookie;
            var cookieArray = cookieString.split ("; ");

            // scan for desired cookie:
            for (var i = 0; i < cookieArray.length; ++i) {
               var singleCookie = cookieArray [i].split ("=");
               if (singleCookie.length != 2)
                  continue;
               var name  = unescape (singleCookie [0]);
               var value = unescape (singleCookie [1]);

               // Return cookie if found:
               if (key == name)
                  return value;
            } // for
         } // cookie found

         // cookie key was not found:
         return false;
      }

function visit() {

      var today = new Date();
      var yesterday = new Date(today - (1000*24*60*60));


      if (new Date(getCookie("LastVisit")) <= yesterday) {
            i = getCookie("LastImage") - 0 + 1
            i = i % 6
      }


     bakeCookie('LastVisit', today.toGMTString(), '365');
     bakeCookie('LastImage', i, '365');



}

// -->

</script>
</head>

<body onLoad="visit()">

</body>
</html>

Hi Steve,

Thanks a lot! I was able to get this up on the site. I am assuming that this will work with any number of images? Also, I set the var yesterday = new Date(today - (1)); included alert(i), and was able to see the script pop up, however the image did not change every time i refreshed the page? I checked in the cookies however and could see that it was incrementing by 1 each time I refresehed. Any ideas?
ASKER CERTIFIED SOLUTION
Avatar of steve_bagnall
steve_bagnall

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial