Changes Images folder, based on time of day

Question

Update - Already caught one issue. Was simply my stupid mistake. How do I add a function to make this code rerun itself for each time block, so it updates on an open browser? - Thanks

I am trying to have a simple gallery of images (For example 20 images, 15 sec each, scrolling indefinitely), but all the images will change based on the time of day. For example: 8am-11am one set, 12pm-4pm another, 4-8pm, and 8pm-7am. I have been messing with this from existing code I have found, and tried a ton of versions, but none have worked.

This is the code idea I am messing with (not working), but maybe I should be going about this entirely differently. Thoughts?

(example of different time blocks, and only with 3 images - but doesn't work)

$(document).ready(function(){
var d = new Date();
var n = d.getHours();

// If time is after 8PM or before 7AM
if (n > 20 || n < 7) {
$("img#photo1").attr("src","img/8TO7/photo1.jpg");
$("img#photo2").attr("src","img/8TO7/photo2.jpg");
$("img#photo3").attr("src","img/8TO7/photo3.jpg");
}

else if (n > 16 && n < 20) {
 $("img#photo1").attr("src","img/4TO8/photo1.jpg");
 $("img#photo2").attr("src","img/4TO8/photo2.jpg");
 $("img#photo3").attr("src","img/4TO8/photo3.jpg");
 }

else {
 $("img#photo1").attr("src","img/main/photo1.jpg");
 $("img#photo2").attr("src","img/main/photo2.jpg");
 $("img#photo3").attr("src","img/main/photo3.jpg");
 }
});

Answer 1

The following demo should do what you want.

You can re-run your code with setIntervall(callback, time_in_ms). In the demo the interval is set to 5sec. to show that it is running.

Maybe you could add image caching and a check that the images are only reloaded if necessary. At the moment, it reloads the images at every callback.

You can find the same code here at jsFiddle.

For testing you can pass a time to var d = new Date('17/12/2014 16:00:00'); so it's easier to test that the right set is displayed.

$(document).ready(function () {
    //var d = new Date();
    
    var timer = function () {
        var d = new Date(); //'17/12/2014 06:00:00'); // test date 4pm to 8pm  
        console.log(d);
        var n = d.getHours();
        console.log(n);

        var url = 'http://lorempixel.com/400/200/sports/';
        var urls8pmto7am = [url + '1/', url + '2/', url + '3/'];
        var urls4pmto8m = [url + '4/', url + '5/', url + '6/'];
        var urls = [url + '7/', url + '8/', url + '9/'];

        // If time is after 8PM or before 7AM
        if (n > 20 || n < 7) {
            console.log('show set 8pm to 7am');
            $("#photo1").attr("src", urls8pmto7am[0]);
            $("#photo2").attr("src", urls8pmto7am[1]);
            $("#photo3").attr("src", urls8pmto7am[2]);
        } else if (n >= 16 && n <= 20) {

            console.log('show set 4pm to 8pm');
            $("#photo1").attr("src", urls4pmto8m[0]);
            $("#photo2").attr("src", urls4pmto8m[1]);
            $("#photo3").attr("src", urls4pmto8m[2]);
        } else { // main

            console.log('else, should not be triggered');
            $("#photo1").attr("src", urls[0]);
            $("#photo2").attr("src", urls[1]);
            $("#photo3").attr("src", urls[2]);
        }
    };
    
    timer(); // run immediatly after start
    
    setInterval(timer, 5 *1000); // 1 *1000 *60 *60 runs every hour for testing every 5 seconds
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" id="photo1" />
<img src="" id="photo2" />
<img src="" id="photo3" />