Im looking for some advice on how to start a shuffle image function, so I have 6 images atm in a div box and I want a function that allows them to shuffle around, how should I start?? Should I put the images in a separate div as well? any help or example code appreciated, thanks

Im looking for some advice on how to start a shuffle image function, so I have 6 images atm in a div box and I want a function that allows them to shuffle around, how should I start?? Should I put the images in a separate div as well? any help or example code appreciated, thanks

• javascript
• random

3 Answers 3

Following is a jQuery solution. You can achieve same results using vanilla JavaScript but it will require few extra lines of code.

<div id="deck">
  <div><img src="" /></div>
  <div><img src="" /></div>
  .
  .
  .
</div>

// Fisher–Yates Shuffle (Knuth variant)
// To shuffle an array a of n elements (indices 0..n-1):
//   for i from n - 1 downto 1 do
//        j <- random integer with 0 <= j <= i
//        exchange a[j] and a[i]

// jQuery specific:
// 1) remove elements from DOM and convert them into a native JavaScript array
// 2) apply algorithm
// 3) inject the array back to DOM

var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
}
$("#deck").append(a);

Demo here

I've implemented something like this for a memory card game, so you can probably get some hints from that. Just do a resources search for 'shuffle' in my .js files and you should get an idea how I've done it. From memory, I originally put all my images in a div, then move them around with the shuffle function. I think later on I started shuffling an array of URLs instead then generating the image elements later.

I used Ca-Phun Ung's 'Shuffle' JQuery plugin (although I think I re-wrote my own version to better understand its inner workings). You may find some useful information with that as well. See JQuery Shuffle

Ok, I got this!

var divs = $('selector to get all divs'); // This could be $('img');

function shuffle(divs, iterations) {
   var size = divs.size();

   for(var i = iterations; i > 0; i--) {
      // Pick two divs at random
      var div1 = divs[Math.floor(Math.random() * size)],
          div2 = divs[Math.floor(Math.random() * size)];

      // Ensure they are different divs
      if(div1.is(div2)) {
         continue;
      }

      // Swap the two divs
      div1.clone().insertAfter(div2);
      div2.detach().insertAfter(div1);
      div1.detach();
   }
};

shuffle(divs, 1000);

Although this will probably be better if you put a divs.hide(), then divs.show() so that you don't see the thrashing. However, maybe that is what you want? May you want a delay in there and use jQuery's animate function to make it fancy. This particular solution requires that the img's position in the DOM determines the location. A more plex solution would be to swap the css position during the loop.

var savedLeft = div1.css("left"),
    savedTop = div1.css("top");

div1.css("left", div2.css("left"));
div1.css("top", div2.css("top"));
div2.css("left", savedLeft);
div2.css("top", savedTop); 

I haven't actually TRIED this yet, but it looks right from here :P