help with image rotation based on server time

tttwb · May 31, 2010

I am not sure if this is PHP or javascript.

But i am trying to create an image rotar that changes the image displayed every 30 seconds or so. But i don't want the whole cycle to restart each time the page is loaded, i want it to check with the server time so that if you visit the page at 12.00 then visit it 30 seconds later there will be a different image displayed at the different time.

Any help would be appreciated! Cheers

Psycho · May 31, 2010

Not 100% sure what you are asking. If you want the image to change while the user is viewign the page, then you will need to use javascript (possibly AJAX). However, if you only want to dynamically detemine what image to display when the page loads, then you would only need PHP.

Having said that I will interpret what I think you are asking. I think you are wanting the images to rotate through a fixed list (change every 30 seconds while the user is viewing the page). But, when the user refreshes the page the images should start at the position it left off and not start at the beginning again.

Personally, I think that is just overcomplicating things. I'd just hae it display the images randomly and not worry about which ones were viewed previously. But, what you are asking is possible.

I think the easiest solution is to simply set a session variable when the suer first accesses the site and set the time of that access as the value. You can then determine which image to display at any point in time using the following calculation:

$imgIndex = floor((time() - $_SESSION['acess_time'])/30);

You can use that on each page load to detemine the correct image and you can also have a javascript function that will get the next image. But, you wouldn't need to utilize a full-fledged AJAX routine. All you need to do is set the image src to a php page that will determine the correct image to display and then have a javascript function to recall that page as the source of the iamge every 30 seconds.

Example PHP page:

<?php
session_start();

if(!isset($_SESSION['acess_time']))
{
    $_SESSION['acess_time'] = time();
}

$images = array(
    "aaaa.jpg",
    "bbbb.jpg",
    "cccc.jpg"
);

$time     = time();
$imgIndex = floor(($time-$_SESSION['acess_time'])/30) % count($images);
$image    = $images[$imgIndex];

header("Location: {$image}");
?>

Usage in the HTML page:

<html>
<head>

<script type="text/javascript">

function imgRotate()
{
    var imgObj = document.getElementById('rotate');
    imgObj.src = "http://localhost/test/test.php?"+Math.random();
}


window.onload = function()
{
    setInterval ( "imgRotate()", 30000 );
}

</script>
</head>

<body>

<img id="rotate" src="http://localhost/test/test.php" />

</body>
</html>

Note: the random number appended to the src is needed so the browser sees it as a different request than the previous one. Otherwise it "thinks" you are requesting the same image and it will use the one in the cache.

tttwb · May 31, 2010

Thanks alot for your reply, i will give this a try tomorrow.

Yes i would like a cycle to start and play for say 24 hours with a different image every 30 seconds throughout the day depending on the time of day somebody visits the site.

Psycho · June 1, 2010

Thanks alot for your reply, i will give this a try tomorrow.

Yes i would like a cycle to start and play for say 24 hours with a different image every 30 seconds throughout the day depending on the time of day somebody visits the site.

OK, that is something different than what I thought you were saying originally. So, according to what you just said, the images are the same for all users at a specific time of day? I think that is actually an easier implemetation as you wouldn't need to store a session variable and do that calculation.

tttwb · June 1, 2010

yes at specific times of the day depending on the time you visit the site, the images will be the same for everybody viewing it, then change for everybody 30 seconds later.

Cheers

tttwb · June 3, 2010

do you have any ideas on how i would implement this?

Cheers

Psycho · June 3, 2010

Seriously? As I stated it is an easier implementation than I alreay handed you.

The code on the actual page would not change. All you need to do is change the code on the php page that gets the image data to detemine what image to show based upon the current time. how you do that is up to you. But, you will need to determine how you will decide what image to display at any point in time. Since you are wanting a different image for each 30 second block, that means you need to define images for 2,880 different periods. You could do a massive array definining images 0 through 2,879 or you could use a database. But, assuming you don't actually have 2,880 images I would guess you have a much smaller number of images and want to rotate through them each day. When the end of the images is reached then they should start over.

Here is the revised code:

<?php

$images = array(
    "aaaa.jpg",
    "bbbb.jpg",
    "cccc.jpg"
);

$secondsSinceMidnight = time() - mktime(0, 0, 0, date('m'), date('d'), date('Y'));

$imgIndex = ($secondsSinceMidnight/30) % count($images);

header("Location: {$image}");

?>

For the 1st 30 seconds of the day image 'aaaa.jpg' will be displayed, then 'bbbb.jpg' for the 2nd 30 second block, then 'cccc.jpg' for the 3rd 30 second block. It then starts over with image 'aaaa.jpg' for the 4th 30 second block and so on.

Just add all your images to the array and it should work.

tttwb · June 4, 2010

okay cheers, im new to php. So i use the html code you gave earlier and the php code above, and change 'http://localhost/test/test.php' to the location of the php file?

Cheers

Psycho · June 4, 2010

I don't mind helping, but what you just asked seems logical, right? Did you even try it?

All you need to do is set the image src to a php page that will determine the correct image to display and then have a javascript function to recall that page as the source of the iamge every 30 seconds.

brianlange · June 4, 2010

If you just want to show different images at different times you could use javascript.

var d = new Date();

var time = d.getTime();

var firstSelection = time % imageArray.length

You then have to store each image as it shows so it is not repeated.

You can use the setInterval function to run it every thirty seconds.

The image shown will be different depending on what second the image is viewed.

If you really want an exact image at exactly 30 second interval the only way to do this is (as the previous posted suggested) with a massive array or

database table.

tttwb · June 4, 2010

yes i have tried it and done what you said this is the php code ive used

<?php

$images = array(
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
);

$secondsSinceMidnight = time() - mktime(0, 0, 0, date('m'), date('d'), date('Y'));

$imgIndex = ($secondsSinceMidnight/30) % count($images);

header("Location: {$image}");

?>

and this is the html page code im using

<html>
<head>

<script type="text/javascript">

function imgRotate()
{
    var imgObj = document.getElementById('rotate');
    imgObj.src = "http://www.mysite.com/test.php?"+Math.random();
}


window.onload = function()
{
    setInterval ( "imgRotate()", 30000 );
}

</script>
</head>

<body>

<img id="rotate" src="http://www.mysite.com/test.php" />

</body>
</html>

however when i view the html page it just shows a failed to load javascript image. i'm not sure why though.

Cheers

Psycho · June 4, 2010

Well, I tested that code so I know it works. I'm guessing the problem is you are not specifying the correct path to the images. The PHP file is in the root of your site and in that file you are specifying JUST the image name. That will only work if the images are also in the root of your site. Otherwise, you need to provide that.

You could either provide the path for each image in the array that defines the images. But, if all the images are in the same directory then just set it within the header command.

For example, if the images are all in a folder as follows:

[root]/images/rotating/

Then change the PHP script to this:

<?php

$images = array(
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
);

$secondsSinceMidnight = time() - mktime(0, 0, 0, date('m'), date('d'), date('Y'));
$imgIndex = ($secondsSinceMidnight/30) % count($images);
$host  = $_SERVER['HTTP_HOST'];
$image = $images[$imgIndex];

header("Location: http://$host/images/rotating/$image");

?>

If that doesn't work, right-click on the missing image icon and check the properties to see if the path is correct for the image you want to display.

tttwb · June 5, 2010

yes thank you it is working now with that new php. is there anyway of making the images change without having to reload the page every 30 seconds?

Cheers

Psycho · June 6, 2010

The JS code I provided previously will reload the image every 30 seconds without reloading the page.

tttwb · June 6, 2010

Thanks for all your help ive got it working now, but the js reloads the image every 30 seconds after the page is loaded. is there a way to reload the image insync with the time it should change in the 30 seconds since midnight php code.

Cheers

Psycho · June 7, 2010

function imgRotate()
{
    var imgObj = document.getElementById('rotate');
    imgObj.src = "http://localhost/test/test.php?"+Math.random();
    setTimeout ( "imgRotate()", 30000 );
}

window.onload = function()
{
    var now = new Date();
    var nextImage = (30 - now.getSeconds() % 30) * 1000;
    setTimeout ( "imgRotate()", nextImage );
}

tttwb · June 8, 2010

Hi, thanks for your help. Is there a way i could use this code with files instead of images such at .html?

Cheers

Psycho · June 8, 2010

That's it - I'm done with this thread. I've spent way too much time trying to interpret your requests due to vague details and writing full examples for you to use. Then you want to change the requirements.

Plus you don't even make an attempt at trying things. If it doesn't work exactly how you want then you just respond back with another poorly described request. This is a JavaScript HELP forum, to get help with your code. I think you should try the Freelancing forum to see if someone is will to take this on as a paid project.

Good luck to you.

Sign In

help with image rotation based on server time

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information