www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: new image every week

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    2

    new image every week

    Hi
    I've got 54 images, I'd like a script that displays every monday a new image.
    who can help ?

    thanks
    Laura

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Lightbulb Something to try...

    You'll need to substitute your URLs to the images as I have done for this week...
    Code:
    <html>
    <head>
    <title> Week of Year Display </title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=244093
    
    Date.prototype.getWeek = function() {
      var onejan = new Date(this.getFullYear(),0,1);
      return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    }
    var imgList = [
      'url.image0.jpg',   'url.image1.jpg',   'url.image2.jpg',   'url.image3.jpg',   'url.image4.jpg',
      'url.image5.jpg',   'url.image6.jpg',   'url.image7.jpg',   'url.image8.jpg',   'url.image9.jpg',
      'url.image10.jpg',  'url.image11.jpg',  'url.image12.jpg',  'http://www.nova.edu/hpd/otm/pics/4fun/PANIC.JPG',  'url.image14.jpg',
      'url.image15.jpg',  'url.image16.jpg',  'url.image17.jpg',  'url.image18.jpg',  'url.image19.jpg',
      'url.image20.jpg',  'url.image21.jpg',  'url.image22.jpg',  'url.image23.jpg',  'url.image24.jpg',
      'url.image25.jpg',  'url.image26.jpg',  'url.image27.jpg',  'url.image28.jpg',  'url.image29.jpg',
      'url.image30.jpg',  'url.image31.jpg',  'url.image32.jpg',  'url.image33.jpg',  'url.image34.jpg',
      'url.image35.jpg',  'url.image36.jpg',  'url.image37.jpg',  'url.image38.jpg',  'url.image39.jpg',
      'url.image40.jpg',  'url.image41.jpg',  'url.image42.jpg',  'url.image43.jpg',  'url.image44.jpg',
      'url.image45.jpg',  'url.image46.jpg',  'url.image47.jpg',  'url.image48.jpg',  'url.image49.jpg',
      'url.image50.jpg',  'url.image51.jpg'	  // Note: No comma after last entry
    ];
    
    function showImage() {
      var today = new Date();
      var weekno = today.getWeek();
      document.getElementById('WeeklyImage').src = imgList[weekno];
      document.getElementById('WeeklyImage').alt = imgList[weekno];
    //  alert(weekno+'\t'+imgList[weekno]);
    }
    </script>
    
    </head>
    <body onload="showImage()">
    <img id="WeeklyImage" src="" alt="Image of the Week" style="height:100px; width:100px">
    </body>
    </html>
    ... and if the change of image on MONDAY is critical to you,
    you'll need to add some extra logic for this to happen.

    Good Luck!

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    Code:
    <!-- If you can name your image files, and suffix each with an integer,
    you can make it simpler: -->
    
    
    <script>
    function mondayImage(){
        var n, now= new Date(), d= new Date(now.getFullYear(), 0, 0);
        while(d.getDay()!== 1) d.setDate(d.getDate()+1);
        n= Math.floor((now-d)/6.048e8);
        document.getElementById('mondayimage').src= '/path/to/image.image'+n+'.jpg';
    }
    window.onload=mondayImage;
    </script>
    </head>
    <body>
    <img id='mondayimage' src="" alt="monday image">

  4. #4
    Join Date
    Mar 2011
    Posts
    2

    thanks

    both scripts work beautifully
    many thanks !

  5. #5
    Join Date
    Mar 2006
    Posts
    10
    Post #3 works perfectly, well almost. We are currently in week 13 (and Monday 13) of the year, but it is pulling image12.jpg

    Any suggestions?

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    Might this help?

    http://javascript.about.com/library/blweekyear.htm

    The first thing we need to do is to work out how we define when a week starts and finishes and how we determine which week a particular date is in. The getDay() method returns a value of 0 for Sunday and 6 for Saturday so let's start by defining our week as running from Sunday to Saturday. The 1st January can fall on any day of the week and so not all of the days in that week will be in the current year but we'll consider the week that contains the 1st January to be week one of the current year even though not all of the days in that week are necessarily in the current year. So week one consists of those days between 1st January and the first Saturday on or after that date and the seven days following that make up week two and so on. Once we get to the end of December the last few days of the year will be in week 53 (or possibly 54 if it is a leap year starting on a Saturday).
    I wonder about Leap Year 2012 and the fact that days, months, etc. start with zero.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436
    You're most welcome, I'm sure, from both of us.
    Good Luck!

  8. #8
    Join Date
    Feb 2010
    Posts
    11

    How about hourly?

    So if you just want an image to rotate by the hour, put in "getHour" instead?

    And if you want it to loop, add the comma at the end, right?

    I'm just learning, but I want to make sure...

    Thanks!

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Question

    Quote Originally Posted by dischg View Post
    So if you just want an image to rotate by the hour, put in "getHour" instead?

    And if you want it to loop, add the comma at the end, right?

    I'm just learning, but I want to make sure...

    Thanks!
    Which post # code are you asking about? There were two solutions.
    What does your attempt look like?
    It's always a good idea to try the modifications yourself so that you can learn from trying!
    If they don't work, then at least we know what you are trying to do with YOUR code.

  10. #10
    Join Date
    Oct 2011
    Posts
    3

    2 weeks

    Hi, i need this but every 2 weeks?

    thanks in advance!

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Lightbulb

    Quote Originally Posted by outsiderzone View Post
    Hi, i need this but every 2 weeks?

    thanks in advance!
    Which post script are you using?

    Probably easiest modification would be to get the week of the year
    and do a divide by 2 to determine image or message to display.

    pseudo code: (assumes using something similar to post #2)
    var today = new Date();
    var weekOfYear = today.getWeek();
    var imgPointer = Math.floor(weekOfYear/2);
    // use image pointer to point to element of image array to display
    document.getElementById('WeeklyImage').src = imgList[imgPointer];

  12. #12
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    I found it best to use &#37; operator

    Code:
    mytime = Math.floor((new Date().valueOf())/1000) ; //returns timestamp
    days = Math.floor(mytime/86400) % 4; //days modulo 4 always return 0,1,2,3
    so if you want to rotate it by every 14 days you can just do % 14, that will give you number on what you can base rest of your logic

  13. #13
    Join Date
    Oct 2011
    Posts
    3

    wordpress

    thanks for your help!

    i need this to use in wordpress...i need to publish a shotcode ([myshortcode] ) every 2 weeks, how can i do it?

    thanks in advance!

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Question Confused ...

    Quote Originally Posted by outsiderzone View Post
    Hi, i need this but every 2 weeks?

    thanks in advance!
    Quote Originally Posted by maurycy View Post
    I found it best to use % operator

    Code:
    mytime = Math.floor((new Date().valueOf())/1000) ; //returns timestamp
    days = Math.floor(mytime/86400) % 4; //days modulo 4 always return 0,1,2,3
    so if you want to rotate it by every 14 days you can just do % 14, that will give you number on what you can base rest of your logic
    I read the original request that the image or message would change every 2 weeks, ie;
    stable message for a 2 week period and then changed.
    This assumption is based on post #8 and #10 where OP originally referred to post #2 code, I thought.

    Your code seems to change every day for a 4 day, if you % 4,
    or a 2 week period, if you % 14, and then repeats the images or messages.

    What ever the OP wants is fine, but it would be nice to know what the exact requirements are as the request is somewhat vague!

  15. #15
    Join Date
    Mar 2006
    Posts
    10
    Ah, it starts with 0!
    Any way to make it start with 1?

    (I have others who will be populating the images, and I'd like to K.I.S.S.)



    And how can I also make this change sequential text files on Monday for virtual SSI includes?

    I tried this, but it didn't work. I'm sure I've got something totally wrong:

    <script>
    function mondayText(){
    var n, now= new Date(), d= new Date(now.getFullYear(), 0, 0);
    while(d.getDay()!== 1) d.setDate(d.getDate()+1);
    n= Math.floor((now-d)/6.048e8);
    document.getElementById('mondaytext').src= '/text'+n+'.txt';
    }
    window.onload=mondayText;
    </script>
    </head>

    <body>
    <!--#include virtual id='mondaytext' src="" -->
    </body>
    </html>
    Last edited by LambdaEnt; 03-29-2012 at 03:00 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles