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

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.