Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Display a new image each week

    I would like my web page to swap in a new image each week for four weeks.
    The code below shows a week has passed however continues to display the default image.

    Code:
    <img src="images/Offers/DigiPack-4-weeks.jpg" id="img" />
    
    $(document).ready(function(){
        var images = 
                    {
                        1 : "images/Offers/DigiPack-3-weeks.jpg",   // 1st  : "path to image"
                        2 : "images/Offers/DigiPack-2-weeks.jpg",   // 2nd  : "path to image"
                        3 : "images/Offers/DigiPack-1-week.jpg"    // 3rd  : "path to image"
                        
                        // keep doing this until your final date
                    };
    
    
             var firstDay = new Date("2017/05/08");
        var nextWeek = new Date(firstDay.getTime() + 7 * 24 * 60 * 60 * 1000);
    
    
        $("#img").attr("src", images[nextWeek]);
    });
    Best regards Maxwell
    Last edited by maxwell5; May 16th, 2017 at 02:45 PM.

  2. #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    187
    Thanks
    0
    Thanked 58 Times in 55 Posts
    This should work.
    Code:
    var images = [
      "images/Offers/DigiPack-4-weeks.jpg",
      "images/Offers/DigiPack-3-weeks.jpg",
      "images/Offers/DigiPack-2-weeks.jpg",
      "images/Offers/DigiPack-1-week.jpg"
    ];
    
    var firstDay = new Date("2017/05/08");
    var current = Date.now();
    var week = Math.floor((current - firstDay) / 6048e5); // passed weeks, so first week is 0
    
    if(week <= images.length){
      $("#img").attr("src", images[week]);
    }

  3. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,689
    Thanks
    34
    Thanked 1,039 Times in 1,035 Posts
    I think I'd just set a cron job.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  4. #4
    New Coder
    Join Date
    Jun 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Goos
    I would like to reuse this script in a few week time, can you tell me how to test that it works now?

    I tried setting the firstDay variable to 2017/01/09 ... with now() being today 2017/09/09
    and ran it in the Browser, however the image did not change.
    I also tried running it in Google's Javascript console without any luck!

    Best regards Maxwell

  5. #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    187
    Thanks
    0
    Thanked 58 Times in 55 Posts
    The used date format is yyyy/mm/dd, so you should be setting the firstDay variable to 2017/09/01.

  6. #6
    New Coder
    Join Date
    Jun 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Goos
    I'm having trouble with this script again, the advice you gave me previously fixed the problem, however It won't work now,
    could it be something to do with the hex value 6048e5?

    Code:
    $(document).ready(function(){
       var images = [
      "images/offers/DigiPack-4-weeks.jpg",
      "images/offers/DigiPack-3-weeks.jpg",
      "images/offers/DigiPack-2-weeks.jpg",
      "images/offers/DigiPack-1-week.jpg"
    ];
    //date format is yyyy/mm/dd
    var firstDay = new Date("2018/04/19");
    
    
    var current = Date.now();
    
    
    // passed weeks, so first week is 0
    var week = Math.floor((current - firstDay) / 6048e5); 
    
    
    if(week <= images.length){
      $("#img1").attr("src", images[week]);
    }
    });
    
     <img src="images/offers/DigiPack_offerOver.jpg" id="img1" alt="competition" /></a>

  7. #7
    Regular Coder
    Join Date
    Apr 2011
    Posts
    187
    Thanks
    0
    Thanked 58 Times in 55 Posts
    That value isn't hex, it's 7 * 24 * 60 * 60 * 1000 = 6048 * 10^5. That shouldn't give any problems. What is the problem you're having? Do you get an error in the console?

  8. #8
    New Coder
    Join Date
    Jun 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Goos
    I tried using the JS Console and things are working ok now, many thanks for the help!
    Is there any special reason for dividing by the number 604,800,000?

  9. #9
    Regular Coder
    Join Date
    Apr 2011
    Posts
    187
    Thanks
    0
    Thanked 58 Times in 55 Posts
    When you do a arithmetic operation on a date object, it's valueOf() is returned which are the miliseconds since 1-1-1970.
    So (current - firstDay) returns the difference in miliseconds, which are then divided by the amount of miliseconds in a week.

  10. #10
    New Coder
    Join Date
    Jun 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Goos
    If I do a document.write(week); Output is -7
    How does that fit in with images.length

    var week = Math.floor((current - firstDay) / 6048e5);


    if(week <= images.length){
    $("#img").attr("src", images[week]);
    }

  11. #11
    Regular Coder
    Join Date
    Apr 2011
    Posts
    187
    Thanks
    0
    Thanked 58 Times in 55 Posts
    What are you trying you achieve? Do you want it to run for a longer period of time? The output of -7 corresponds to a start date in june.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •