Selecting a random image to display

Question

I have a page that contains 4 images. I would like these images to be chosen randomly from a selection of images, each time the page is viewed.

The images also need to link to a specific page (depending on which image is displayed). For example:

image_01 <- links to -> page_620.html
image_04 <- links to -> page_154.html

HTML:

<div class="thankyou_wrapper">
  <div class="thankyou">
    <div class="socialphoto_container">
      <div class="socialphoto"><a href="page_082.html" target="_self"><img src="images/image_01.jpg" width="220" height="220" /></a></div>
      <div class="socialphoto"><a href="page_128.html" target="_self"><img src="images/image_05.jpg" width="220" height="220" /></a></div>
      <div class="socialphoto"><a href="page_852.html" target="_self"><img src="images/image_08.jpg" width="220" height="220" /></a></div>
      <div class="socialphoto"><a href="page_685.html" target="_self"><img src="images/image_04.jpg" width="220" height="220" /></a></div>
    </div>
  </div>
</div>

CSS:

.thankyou_wrapper {
    width: 100%;
    background-color: #FFF;
}
.thankyou {
    margin: auto;
    width: 940px;
    min-height: 216px;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}
.socialphoto_container {
    width: 940px;
    height: 230px;
}
.socialphoto {
    width: 240px;
    height: 220px;
    margin-right: 0px;
    float: left;
}
.socialphoto:last-child {
    width: 220px;
}

Any ideas?

You can use JavaScript to change the `src` of the `img` elements. But then you're out of luck if JavaScript is disabled. Or, you can choose the images server-side (by having the `img`s point to things that can be created dynamically, such as PHP files. But then you get caching problems - the pictures won't change every time the user revisits the page. — Mr Lister, Jun 17 '13 at 07:29
@MrLister, for the caching part, that could be solved by using the timestamp in the URL for example. So theoretically, your solution could work. — Viezevingertjes, Jun 17 '13 at 07:57

score 4 · Accepted Answer · edited May 23 '17 at 12:21

It can be done by creating an array of the possible images, shuffling the array, then grab the first 4 images and append to the div:

// randomize array function
Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}

// declare image data as array of objects
var images = [
    { src : 'images/image_01.jpg', href : 'page_082.html' },
    { src : 'images/image_02.jpg', href : 'page_083.html' },
    { src : 'images/image_03.jpg', href : 'page_084.html' },
    { src : 'images/image_04.jpg', href : 'page_085.html' },
    { src : 'images/image_05.jpg', href : 'page_086.html' },
    { src : 'images/image_06.jpg', href : 'page_087.html' }
];

$(document).ready(function(){

    var img, anchor, div;
    var cont = $('.socialphoto_container');
    cont.children().remove();

    images.shuffle();

    for(var i=0; i<4; i++){
        img = $('<img />', { src : images[i].src });
        anchor = $('<a></a>', { href : images[i].href, target : '_self' });
        div = $('<div></div>', { class : 'socialphoto' });
        anchor.append(img);
        div.append(anchor);
        cont.append(div);
    }
});

Array.shuffle() is the Fisher-Yates algorithm, taken from here.

The `for` loop adds them to the HTML (DOM) when the page loads, you don't need to change your actual HTML code (leave it as in your question). — MrCode, Jun 17 '13 at 07:55

Selecting a random image to display

1 Answers1

Linked