How Do I Randomize the Order of the Images?

Question

Part where images are loaded:

<div id="lighttable">

<img src="http://throwingupthew.com/girls/01.jpg" alt="01" />
<img src="http://throwingupthew.com/girls/02.jpg" alt="02" />
<img src="http://throwingupthew.com/girls/03.jpg" alt="03" />

etc....

</div>

How do i randomize the order of the images? Please keep in mind i will not know where to place any code/answer in index.html

Thank you.

Start by doing a bit of research first: http://stackoverflow.com/questions/5329201/jquery-move-elements-into-a-random-order — Blender, Feb 20 '13 at 01:07
I want to randomize then in the easiest way possible. I know nothing about html/javascript coding apart from adjusting values to alter outcomes. — Wade Winiata, Feb 20 '13 at 01:12

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

Change your HTML to this :

<div id="lighttable">

<img id="girl1" src="" alt="01" />
<img id="girl2" src="" alt="02" />
<img id="girl3" src="" alt="03" />

etc....

</div>

Put this right before your page's </head> tag

<script type="text/javascript">
var array = ['http://throwingupthew.com/girls/01.jpg','http://throwingupthew.com/girls/02.jpg','http://throwingupthew.com/girls/03.jpg'];
function shuffle(array) {
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
var shuffled_images = shuffle(array);
for(var i=0;i<3;i++) {
document.getElementById('girl' + (i+1)).src = shuffled_images[i] ;
}
</script>

Thanks to this page Randomizing(Shuffling) an Array, that I was able to make this script up for you :)

Here's the working JSFiddle :)

How Do I Randomize the Order of the Images?

1 Answers1