Menu
Hello.
Im looking for help to make a site with image wich would change based
on seconds and minutes of an hour.
Image (size about 500×280) should change every second
(or at least every 5 sec).
Example: If I enter the site at 15:00.07, first image i would see would be Image 0007 which changes after a second to 0008 and so on.
If entering the site 17:59.59 Image would number 3600 and next would be 0001.
I hope you understud. Ask is problems to understand.
I really really appreciate any kind of help.
vicward
<i>
</i>displayImg();
function displayImg() {
var now = new Date();
var baseDate = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 15, 00, 00, 00);
var imgNum = parseInt(Math.abs(baseDate-now)/1000);
while (imgNum > 3600) {
imgNum-=3600;
}
if (imgNum < 10) imgNumPadded = "000"+imgNum;
else if (imgNum < 100) imgNumPadded = "00"+imgNum;
else if (imgNum < 1000) imgNumPadded = "0"+imgNum;
document.getElementById("imageID").src="Image"+imgNumPadded; // replace imageID with the id of the image tag
setTimeout("displayImg()",1000);
}[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--
var imgNum;
var imgPaths = new Array();
var myImages = new Array();
var timer;
// I assume your 3600 images are named pic1.jpg to pic3600.jpg
//load the 3600 image paths
for(var i=1; i<=3600; i=i+1) {
imgPaths[i] = 'pic'+i+'.jpg';
}
//preload the images
for(var i=1; i<=3600; i=i+1) {
myImages[i] = new Image();
myImages[i].src = imgPaths[i];
}
//load the initial image
function loadImage() {
var currDate = new Date();
var currMin = currDate.getMinutes();
var currSec = currDate.getSeconds();
imgNum = (currMin*60)+currSec;
document.getElementById("myImg").src = myImages[imgNum].src;
}
//function to swap the image
function swapImage() {
imgNum = imgNum + 1;
if(imgNum > 3600) imgNum = 1;
document.getElementById("myImg").src = myImages[imgNum].src;
}
//-->
</script>
</head>
<body onload="loadImage(); setInterval('timer=swapImage()',1000);">
<div>
<img id="myImg" src="" alt="" />
</div>
</body>
</html>
[/code][code=php]
var myImages = new Array();
//preload the images
for(var i=1; i<=3600; i=i+1) {
myImages[i] = new Image();
myImages[i].src = imgPaths[i];
}
[/code][code=php]document.getElementById("myImg").src = myImages[imgNum].src;[/code][CODE]document.getElementById("myImg").src = imgPaths[imgNum];[/CODE]If it is imperative that the images are only displayed for 1 second you have a couple options.
1) preload all the images before you start displaying them (this will cause a major delay before the loading begins)
[/quote]
As for it working on the local HD but not online there is a simple reason why. The browser already has a local copy of the files when displaying on the local computer so it only needs to load them from the HD. When displayed on the internet the browser has to download the images first which will take some time for the sheer number of images you are displaying.
[/quote]
It will work locally because the browser is getting the images straight from the local drive and not downloading from some remote server[/QUOTE]
0.1.9 — BETA 5.19