Member Avatar for ggeoff

Hi
I would like to display photos on my website so that they are regularly changed. For example every day, or once a week a different photo is displayed. when each photo has been displayed the sequence is repeated.

Geoff

  • 5 Contributors
  • 5 Replies
  • 2K Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by Member #1131994

Dani AI

Generated

Nice thread. Building on ’s weekday demo and ’s snippet, here’s a modern, minimal pattern that covers both cases folks asked about (including and @salinasalina’s 31-day loop) without using document.write or preloading hacks.

<img id="daily-photo" src="/images/fallback.jpg" alt="Daily photo" loading="lazy">

<script>
document.addEventListener('DOMContentLoaded', () => {
  const photos = [
    // Fill with your image URLs in sequence
    '/images/01.jpg','/images/02.jpg','/images/03.jpg', /* ... */
  ];

  const now = new Date();

  // Option A: map 1..31 directly (good if you curated 31 images)
  const idxByDayOfMonth = (now.getDate() - 1) % photos.length;

  // Option B: rotate every calendar day, any number of photos
  const startOfYear = new Date(now.getFullYear(), 0, 1);
  const dayOfYear = Math.floor((now - startOfYear) / 86400000); // 0..365
  const idxByDayOfYear = dayOfYear % photos.length;

  const index = idxByDayOfMonth; // or use idxByDayOfYear
  const img = document.getElementById('daily-photo');

  // Cache-bust so browsers do not keep yesterday’s image
  const stamp = now.toISOString().slice(0,10); // YYYY-MM-DD
  img.src = photos[index] + '?d=' + stamp;
  img.alt = 'Daily photo ' + (index + 1);
});
</script>

Notes and gotchas:

  • If you truly want 31 unique images, Option A shows 29/30/31 only in months that have them; Option B avoids that by rotating across the whole year.
  • If your audience is in a specific timezone, compute now in that zone to avoid swapping at the “wrong” midnight:
    const tzNow = new Date(new Date().toLocaleString('en-US',{timeZone:'America/New_York'}));
  • Avoid layout shift by setting width/height on the <img> (or a CSS aspect-ratio).
  • For server-driven consistency (same photo for everyone), generate the index server-side and output the chosen URL into the page. This also lets you control caching headers cleanly.

Recommended Answers

All 5 Replies

Member Avatar for essential

Here's a simple javascript demo, that will generate different images depending on what day of the week occured! You can easily modify the whole script and convert it, to load different images depending on the day of the month.

Just simply provide all valid path of your images inside the myPhotos["day1photo.jpg", "day2photo.jpg", "so...on...", "day31photo.jpg"]; array.
DEMO.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Daily Photos</title>

<script type="text/javascript">
// <![CDATA[
var dailyPhotos;
var today, img;

dailyPhotos = function() {

   today = new Date();
   weekday = today.getDay();
   showImages = [ ];
   myPhotos = [ "sundayPhoto.jpg", "mondayPhoto.jpg", "tuesdayPhoto.jpg", "wednesdayPhoto.jpg", "thursdayPhoto.jpg", "fridayPhoto.jpg", "saturdayPhoto.jpg" ]; // You must specify the path or file name of your images that will be loaded in a weekday basis.

    if ( document.images ) {
       for ( var x = 0; x < myPhotos.length; x++ ) { 
       showImages[ x ] = new Image();
       showImages[ x ].src = myPhotos[ x ];          
     } img = (( document.getElementById ) ? document.getElementById("yourImageId") : document.images.yourImageId ); // Specify the id of the image that will get raplaced daily.
        img.src = showImages[ weekday ].src;
        img.alt = myPhotos[ weekday ];         
   } return false; // If the browser can't display images, then EXIT FUNCTION.
};
   window.onload = dailyPhotos;
// ]]>
</script>
</head>
<body>
<div id="main">
<img id="yourImageId" src="tuesdayPhoto.jpg" alt="DEMO" />
</div>
</body>
</html>

Just let me know if you get stuck with this...

Member Avatar for ggeoff

Hi essential

Thanks very much :)

Geoff

Member Avatar for mjswar

Could you give the edit that would show a different image based on the day of the month?

Thanks

Member Avatar for Asitha_1

Use This codes..

<script type="text/javascript"><!--
var imlocation = "images/";
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(7);
image[0] = 'sunday.gif';
image[1] = 'monday.gif';
image[2] = 'tuesday.gif';
image[3] = 'wednesday.gif';
image[4] = 'thursday.gif';
image[5] = 'friday.gif';
image[6] = 'saturday.gif';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>
Member Avatar for Member #1131994

how about the code of image every day till 31 day and restart again
because this code work just for 7 days and not working for 31 day even changing
new ImageArray nothing happen

commented: Avoid posting to many year old posts. Start a new thread instead. -2
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.