new image every week

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Laura44

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

thanks
Laura

JMRKER

You'll need to substitute your URLs to the images as I have done for this week...

<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!

mrhoo

<!-- 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">

Laura44

both scripts work beautifully
many thanks !

JMRKER

You're most welcome, I'm sure, from both of us.
Good Luck!

dischg

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!

JMRKER

dischg;1146650 wrote:
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.

outsiderzone

Hi, i need this but every 2 weeks?

thanks in advance!

JMRKER

outsiderzone;1177659 wrote:
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];

outsiderzone

wow! thanks for your help!

JMRKER

outsiderzone;1177715 wrote:
wow! thanks for your help!

You're most welcome.
Happy to help. (Note could also be applied to every 3+weeks as well)
Good Luck!

maurycy

I found it best to use % operator

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

outsiderzone

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!

JMRKER

outsiderzone;1177659 wrote:
Hi, i need this but every 2 weeks?

thanks in advance!

maurycy;1177841 wrote:
I found it best to use % operator
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! :rolleyes:

LambdaEnt

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?

LambdaEnt

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:

Gray1989

Just add 1 to the n variable like this:

n= Math.floor((now-d)/6.048e8)+1;

Gray1989

You can't use an algorithm to dynamically decide the location of a server-side include as far as I know, but especially if the code is running on the client side (like the JavaScript you're trying to use). I think you need to look at a basic AJAX tutorial and see if you can combine your code to make it fit. I hope that helps.

Gray1989

You may also want to try using an iframe if you find AJAX too complicated.

Gray1989

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    { // Notice the element output here
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

// This is where you would likely put your code

// The filename variable is changeable with JavaScript from here
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();