Image Change at Certain System Time

[TheVendor]

Hello,

I was wondering if it would be possible to swap an image for another image at a certain time. This would occur when the user's system time hits say 6:00pm then it would switch to a different image. It would have to stay at this same image until say 6:00 AM and then it would switch back to the first image until 6:00 PM again, and so forth.

So could this be done with some php code, and if it could how would I code it?

Thanks,

Nick

[chrishea]

Assuming that the new image would show when the next person gets to the specific page (or pages), then you probably need Cron or something like that to trigger a (PHP) program that would set an indicator / name for which image to use. The indicator would have to be in your database so all subsequent sessions are able to check it.

This, of course, assumes that the image to be used and the time to change from one to the other isn't predictable. If it is, then you would just put the code into the program that displays the image, check the time and then display the appropriate image.

I'd just have an include file (like config.php) containing all the relevant info in a switch statement. E.g.

//$current_time = integer from 0 to 23 (for hour), which is taken from date() functions

switch($current_time){
 case < 6:
   $timeimg = "morning.jpg";
   break;
case > 18:
   $timeimg = "evening.jpg";
   break;
default:
   $timeimg = "afternoon.jpg";
   break;
}

This $timeimg will then show/change when a page is opened/refreshed at particular times. No need for a cron job.
Changing the image without refresh will need a javascript equivalent - straightforward - if using local time. If you want this as server time, you'll have to specify that in the code.

The image could be a background image (a la CSS) - just put it in <style> tags in the head with your $timeimg variable:

<style>.headerbanner{
  background-image: url(/images/<?php echo $timeimg;?>);
}
</style>

Javascript could do the same by classname switching. Note - this isn't the php solution mentioned above! If you have say 3 classes for time image in your CSS file:

.morning{
   background-image: url(/images/morning.jpg);
}
.evening{
  background-image: url(/images/evening.jpg);
}
.afternoon{
  background-image: url(/images/afternoon.jpg);
}

The banner area could then be swapped via:

document.getElementById('banner_area').className = sTime;

where sTime is the js variable having one of the values (morning, evening or afternoon)

[venkat0904]

a complete solution... really appreciate it ardav.. :)

I'd just have an include file (like config.php) containing all the relevant info in a switch statement. E.g.

//$current_time = integer from 0 to 23 (for hour), which is taken from date() functions

switch($current_time){
 case < 6:
   $timeimg = "morning.jpg";
   break;
case > 18:
   $timeimg = "evening.jpg";
   break;
default:
   $timeimg = "afternoon.jpg";
   break;
}

This $timeimg will then show/change when a page is opened/refreshed at particular times. No need for a cron job.
Changing the image without refresh will need a javascript equivalent - straightforward - if using local time. If you want this as server time, you'll have to specify that in the code.

The image could be a background image (a la CSS) - just put it in <style> tags in the head with your $timeimg variable:

<style>.headerbanner{
  background-image: url(/images/<?php echo $timeimg;?>);
}
</style>

Javascript could do the same by classname switching. Note - this isn't the php solution mentioned above! If you have say 3 classes for time image in your CSS file:

.morning{
   background-image: url(/images/morning.jpg);
}
.evening{
  background-image: url(/images/evening.jpg);
}
.afternoon{
  background-image: url(/images/afternoon.jpg);
}

The banner area could then be swapped via:

document.getElementById('banner_area').className = sTime;

where sTime is the js variable having one of the values (morning, evening or afternoon)

BTW:

Just in case you think I come from the planet Zog, no my afternoon does not start at 06:00!

case < 6: should be case < 12:

Doh!

[TheVendor]

Wow great info ardav. I really appreciate it.

So would this config.php file just go along with my index.html file in the same directory?

And does that javascript go in the header section?

Also does anything need to be changed to the php code below, besides file names?

Thanks :)

Nick

Sorry, my last post didn't show up - it timed out.

You seem to be using .html files, so php code will not work with them (unless you've allowed it via .htaccess or are using a model-view-control system).

Change the .html entension to .php if you can. If your hosting option does not support php, you'll have to make do with the javascript solution.

Assuming you can use php:

In each web page that you want to show the banner, have the following code appear above the <html> tag.

<?php
  include('path-to-folder/config.php');
?>

You can call the config.php file anything you want, e.g. nightnday.php would be fine.
The "path-to-folder" is just the path to the file. This can either be relative or absolute. A failsafe-ish way would be:

include("{$_SERVER['DOCUMENT_ROOT']}/path-to-folder/config.php");

In order to get your hour integer:

$current_time = date('G');

Hope that's clear.

[TheVendor]

I'm thinking about doing this as a Joomla site, so the extension would be .php then.

Okay so in my index.php file I would put:

<?php
 include("{$_SERVER['DOCUMENT_ROOT']}/path-to-folder/config.php"); 
?>
<html>
<head>
<style>.headerbanner{
  background-image: url(/images/<?php echo $timeimg;?>);
}
</style>
</head>
<body>
<div class="headerbanner"></div>
</body>
</html>

And then the config.php file would look like this(?):

<?php
//$current_time = integer from 0 to 23 (for hour), which is taken from date() functions

switch($current_time){
 case < 6:
   $timeimg = "day.jpg";
   break;
case > 18:
   $timeimg = "night.jpg";
   break;
}
?>

(only need a night and a day image)

I'm still not sure where

$current_time = date('G');

fits in though.

Sorry I am a php newbie lol.

Anyways thanks for the help so far :)

<?php
//$current_time = integer from 0 to 23 (for hour), which is taken from date() functions

$current_time = date("G");

 
switch($current_time){
 case < 18:
   $timeimg = "day.jpg";
   break;
case >= 18:
   $timeimg = "night.jpg";
   break;
}
?>

The date("G") is what gives you the current hour. I've called the variable $current_time, but you could call it anything. I've changed the operators/values in the switch - otherwise you'd have no image between 5.59am and 6.59pm!

BTW: Joomla is a CMS/templater which may make it difficult to attach your scripts/includes. It can be done - no problem, but it's not as straightforward as custom pages.

[TheVendor]

<?php
//$current_time = integer from 0 to 23 (for hour), which is taken from date() functions

$current_time = date("G");

 
switch($current_time){
 case < 18:
   $timeimg = "day.jpg";
   break;
case >= 18:
   $timeimg = "night.jpg";
   break;
}
?>

The date("G") is what gives you the current hour. I've called the variable $current_time, but you could call it anything. I've changed the operators/values in the switch - otherwise you'd have no image between 5.59am and 6.59pm!

BTW: Joomla is a CMS/templater which may make it difficult to attach your scripts/includes. It can be done - no problem, but it's not as straightforward as custom pages.

Okay, sounds pretty straight forward, thanks.

Yeah I'm not sure if it will be an issue or not because as long as its linking to the config.php file which will be present on each page it should be able to make the switch right?

Yes. However, Joomla! probably has a file called config.php somewhere. You may want to call your file something else to avoid confusion.

[TheVendor]

Yes. However, Joomla! probably has a file called config.php somewhere. You may want to call your file something else to avoid confusion.

Yeah true. Okay great, thanks for the all the help. :)