How do I rotate an image at 12 midnight every day?

Question

I need to rotate an image at 12 midnight every day from a group of 5-10 images. How can I go about doing this with javascript or jquery or even php?

Answer 1

If you are running a linux system you can set a Cron Job or you can use the windows task scheduler if you are on windows

Answer 2

Maybe I don't understand the question.
If you just want to change the image write a batch file/cron job and have it run every day.
If you want to display a certain image on Monday, and a different one of Tuesday then do something like this:

<?php
switch(date('w'))
 {
  case '1':
   //Monday
   break;
  case '2':
   //Tuesday:
   break;
...
}
?>

Answer 3

I'd do it on first access after midnight.

Answer 4

At a basic level what you want to do is define an array of image names then take the number of days from a given point in time then modulo (remainder after division) by the number of images and access that index in the array and set the image, e.g. (untested code)

var images = new Array("image1.gif", "image2.jpg", "sky.jpg", "city.png");
var dateDiff = new Date() - new Date(2008,01,01);
var imageIndex = Math.Round(dateDiff/1000/60/60/24) % images.length;
document.GetElementById('imageId').setAttribute('src', images[imageIndex]);

Bear in mind that any client-side solution will be using the date and time of the client so if your definition of midnight means in your timezone then you'll need to do something similar on your server in PHP.

Answer 5

You have two options.

1. In JavaScript, you basically have it choose an image based on the day of the week or day of the month if you have more than 7 images. Day of the month modulo by the length of the image array should let you pick the right array element.

2. You need something a bit more stateful to track what's going on... using SQL you can track when images are used and pick from the rotating list. You could also use a text file maintained by PHP to track the ordered list.

The old school way is to have a cron job rotate the image, but I'd avoid that these days.

Answer 6

That depends on how you are rotating them - sequentially, randomly, or what?

There are a number of options. You can determine which image you want in PHP, and dynamically change your <img> element to point to the correct location. This is best if you are already generating your pages dynamically.

You can always point to a single URL, which is a PHP file that determines which image to show and then performs a 302 redirect to it. This is better if you have static pages that you don't want to incur the overhead of dynamic generation for.

Don't make the image URL itself serve different images. You'll screw up your cache hit ratio for no good reason and incur unnecessary overhead on what should be a static resource.

Martin, "rotate" in this context means "change on a regular basis", not "turn around an axis".

Answer 7

It depends (TM) on what exactly you want to achieve. Just want to display a "random" image? Maybe this javascript snippet will get you started:

var date = new Date();
var day = date.getDate(); // thats the day of month, use getDays() for day of week

document.getElementById('someImage').src = '/images/foo/bar_' + (day % 10) + '.gif';

Answer 8

It doesn't even have to be in cron:

<?php
// starting date for rotation
$startDate = '2008-09-15';
// array of image filenames
$images = array('file1.jpg','file2.jpg',...);

$stamp = strtotime($startDate);
$days = (time() - $stamp) / (60*60*24);
$imageFilename = $images[$days % count($images)]
?>

<img src="<?php echo $imageFilename; ?>"/>

Answer 9

Edit: I totally misread this question as "without using javascript/PHP". So disregard this response. I'm not deleting it, just in case anyone was crazy enough to want to use this method.

Doing it without Javascript, PHP, or any other form of scripting language could be difficult. Well actually, it would just be very contrived, since it would be trivial with even the most basic JS/PHP.

Anyway, to actually answer your question, the only way I can think of doing it with vanilla HTML is to set up a shell script to run at midnight. That script would just rename your files. Do this with cron (on linux) or Windows Task Scheduler with a script kinda like this: (dodgy pseudo code follows, convert to whatever you're comfortable with).

let number_of_files = 5

rename current.jpg to number_of_files.jpg

for (x = 2 to number_of_files)
    rename x.jpg to (x-1).jpg

rename 1.jpg to current.jpg

In your HTML, just do this:

<img src="path/to/current.jpg" />

And every day, current.jpg should change to something new. If you're using any sort of cache-control, make sure to change it so that it doesn't get cached for longer than a few hours.

Answer 10

I assume by "rotate image" you mean "change the image in use" and not "rotational transformation about an axis" -- a simple way is to have a hash table that maps day modulo X to an image name.

$imgs = array("kitten.jpg", "puppy.gif","Bob_Dole.png");    
$day_index = 365 * date("Y") + date("Z")

...

<img src="<? $imgs[$day_index % count($imgs)] ?>" />

(sorry if I got the syntax wrong, I don't really know PHP))

Answer 11

Set up a directory of images. Select seven images and name them 0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, Using mootools Javascript framework with an image tag in HTML with id "rotatingimage":

var d=new Date();
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var offset = -10;  // set this to your locale's UTC offset
var desiredTime = utc + (3600000*offset);
new dd = new Date(desiredTime); 
$('rotatingimage').setProperty('src', dd.getDay() + '.jpg');

Answer 12

Here's a solution which will choose a random image per day from a directory, which might be easier than some other solutions posted here, since all you have to do to get something into the rotation is upload it, rather than edit an array, or name the files in arbitrary ways.

function getImageOfTheDay() {
    $myDir = "path/to/images/";

    // get a unique value for the day/year.
    // 15th Jan 2008 -> 10152008. 3 Feb -> 10342008, 31 Dec -> 13662008
    $day = sprintf("1%03d%d", date('z'), date('Y'));

    // you could of course get gifs/pngs as well.
    // i'm just doing this for simplicity
    $jpgs = glob($myDir . "*.jpg");
    mt_srand($day);
    return $jpgs[mt_rand(0, count($jpgs) - 1)];
}

The only thing is that there's a possibility of seeing the same image two days in a row, since this picks it randomly. If you wanted to get them sequentially, in alphabetical order, perhaps, then use this. (only the last two lines are changed)

function getImageOfTheDay() {
    $myDir = "path/to/images/";
    $day = sprintf("1%03d%d", date('z'), date('Y'));
    $jpgs = glob($myDir . "*.jpg");
    return $jpgs[$day % count($jpgs)];
}

Answer 13

How to rotate the images has been described in a number of ways. How to detect when to trigger the rotate depends on what you are doing (please clarify and people can provide a better answer).

Options include:

1. Trigger the rotate on 'first access after midnight'. Assumes some sort of initiating event (eg user access)
2. Use the OS scheduling capabilities to trigger the rotate (cron on *nix, at/task scheduler on Windows)
3. Write code to check time & rotate

Option 3 has the risk that a poorly coded solution could be overly resource intensive.