Question

Pretty much as the title. I have been asked if it is possible to have a specific banner shown in a section on a website on different days without any external user input.

My first thoughts are the use of javascript/jquery. We are limited with the functionality however as the site is controlled by the horror that is Netsuite.

Any help/ideas are appreciated 🙂

-Wayne

Answer 1

EDIT: With regard to your comment, it sounds like you want to load a different slideshow depending on the day of the week.

Here’s a simple generic example of how it could be done.

  // Insert the code that loads the individual slideshows in the functions below
var slideshows = [
    function() { /* insert code to load some slideshow */ },
    function() { /* insert code to load some other slideshow */ },
    function() { /* insert code to load a different slideshow */ },
    function() { /* insert code to load yet another slideshow */ }
];
  // call a slideshow function depending on the day of week
slideshows[ new Date().getDate() % slideshows.length ]();

This will call a different function from the Array depending on the day of week. You don’t need seven of them. It will automatically rotate.

There are other ways to approach this, but I’d need to see how the slideshows are set up. This is a simple approach.

If you have more than 7 different slideshows, it will need to be changed a bit.

---

EDIT: This answer assumes you meant different per day of week. Not sure if that was your intention.

---

This is probably better than my original answer since it doesn’t require loading all the banners.

javascript only version

Example: http://jsfiddle.net/patrick_dw/5drgu/4/

var banners = [
    "http://dummyimage.com/120x90/f00/fff.png&text=my+image",
    "http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
    "http://dummyimage.com/120x90/00f/fff.png&text=my+image",
    "http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
    ];
var banner = new Image();
banner.src = banners[ new Date().getDate() % banners.length ];
document.getElementById('container').appendChild( banner );

---

jQuery version

Example: http://jsfiddle.net/patrick_dw/5drgu/7/

(changed it a bit so it doesn’t start with an empty <img>)

var banners = [
    "http://dummyimage.com/120x90/f00/fff.png&text=my+image",
    "http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
    "http://dummyimage.com/120x90/00f/fff.png&text=my+image",
    "http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
    ];
var banner =  $('<img>', { src:banners[ new Date().getDate() % banners.length ]})
                          .appendTo('#container');

html

<div id='container'></div>

---

Original answer:

Here’s one way:

Example: http://jsfiddle.net/patrick_dw/5drgu/

var banners = $('#container img').hide();
banners.eq( new Date().getDate() % banners.length ).show();

html

<div id='container'>
   <img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
   <img src = "http://dummyimage.com/120x90/0f0/fff.png&text=my+image" />
   <img src = "http://dummyimage.com/120x90/00f/fff.png&text=my+image" />
   <img src = "http://dummyimage.com/120x90/ff0/fff.png&text=my+image" />
</div>