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.


9 Years
Discussion Span
Last Post by salinasalina

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.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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;
// ]]>
<div id="main">
<img id="yourImageId" src="tuesdayPhoto.jpg" alt="DEMO" />

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


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



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] + '">');

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

Votes + Comments
Avoid posting to many year old posts. Start a new thread instead.
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.