Change sequence order of 5 images on page load

Question

I want to display 5 images vertically in my webpage sidebar. I want the sequence order be changed each time the page is refreshed or reloaded. There are many solutions for one image to be display out of n numbers. But I am unable to find such solution for 5 images (all displayed vertically at once but the sequence changes on every page load)

All these images have individual link URLs. I am searching for a JavaScript solution.

Show us what code have you already got. I'll be much easier for you to get help from that point on. — acdcjunior, Jul 21 '13 at 08:13
You say there are many solutions for one image. Pick one of those solutions. Make it work for one. After that, try to expand it. When (if) you get stuck, come back here with what you have tried and I'm sure you'll get plenty of help. — acdcjunior, Jul 21 '13 at 08:24

score 0 · Answer 1 · edited May 23 '17 at 11:49

I don't know javascript well but you should be able write it from pseudocode:

ArrayOfStrings[0] = "image1.jpg"
ArrayOfStrings[1] = "image2.jpg"
ArrayOfStrings[2] = "image3.jpg"
ArrayOfStrings[3] = "image4.jpg"

ArrayOfIds = {0, 1, 2, 3}

When loading page:

Shuffle(ArrayOfIds);

SetImg1Urs(ArrayOfStrings[ArrayOfIds[0]]);
SetImg2Urs(ArrayOfStrings[ArrayOfIds[1]]);
SetImg3Urs(ArrayOfStrings[ArrayOfIds[2]]);
SetImg4Urs(ArrayOfStrings[ArrayOfIds[3]]);

For shuffling arrays you should visit How can I shuffle an array?

score 0 · Accepted Answer · answered Jul 21 '13 at 08:44

You could try this code: (Just change the image names in the array)

var array = ['1.png', '2.png', '3.png', '4.png', '5.png'];
var str = ['0', '1', '2', '3', '4'];
for(var j, x, i = str.length; i; j = parseInt(Math.random() * i), x = str[--i], str[i] = str[j], str[j] = x);
for(var i=0;i<=4;i++){ 
    var arr = array[str[i]];
    document.getElementById('sidebar').innerHTML += '<img src="'+arr+'"><br>';
}

JSFiddle: http://jsfiddle.net/FlameTrap/ZUssR/

Change sequence order of 5 images on page load

2 Answers2