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

    Timing of slideshow to accurate time

    Hi, I am new here because I have a specific problem that I can not solve and hope you can help me. I have searched for a topic that would answer my question but did not find anything that works.
    Here is my problem.
    I am developing an iPhone theme using html pages. I recently used javascript to change the background picture and css styles depending on the time of day (changes between 0-6, 6-12, 12-18 and 18-24 hours, fairly accurate due to a time refresh javascript running every 60 seconds.
    But now my newest project is a slideshow of 60 pictures, each lasting a minute. The particular problem I have is the correct timing, for example Picture1 runs in the first minute of each hour, Picture2 runs every second minute of each hour, .........Picture60 runs every last minute of each hour, with the transition set at the same time as the minutes change.
    So if somebody turns on the iPhone at 8:37:20 he should see Picture37 and as soon as it is 8:38:00 he should see Picture 38.
    The current system starts at Picture1 whatever the time is and that does not work.
    I hope you understand what I am after.
    If you require any further info/code, please ask, as I do not want to fill this thread with lots of un-usefull stuff.

    UPDATE:
    I have searched and played around a bit and now got it working.
    Below is the code I am using, I guess a few of you will having nightmares seeing it, but it works fine for me , the amateur!

    Code:
    <script>
    
    var crossFadeDuration = 3
    
    var Pic = new Array() 
    
    Pic[0] = 'min0.png'
    .
    .
    .
    .
    Pic[59] = 'min59.png'
    
    
    
    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(){
    	current_date = new Date()
    	j = current_date.getMinutes()
    
       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
    }
    
    
    setInterval(runSlideShow, 100);
    
    </script>
    </head>
    <body onLoad="runSlideShow()">  
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="VU" height=960 width=640>
    <img src= "'min' + j + '.png'" name='SlideShow' width=640 height=960></td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by Rasputin007; 07-24-2011 at 05:39 PM. Reason: Update


 

Posting Permissions

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