Timing of slideshow to accurate time

Rasputin007 · 07-24-2011, 12:29 AM

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>