jQuery Slot machine effect for images

jQuery Slot machine effect for images

Hi All,

I am trying to create a button that would randomise Pictures with a "slot machine effect". Ideally I would need a clever random so that you would have to see all the pictures at least once before seeing an image twice.

I was looking at  http://jsfiddle.net/jakecigar/aMmhZ/12/ but I could not figure out a way to edit it the right way...



the code would be something like this (I am using bootstrap):

  1. <div class="container">
  2.       <div class="row">
  3.             <div class="wrap" style="width: 400px; height: 600px; margin: 0 auto;">
  4.                   <div class="image1" style="width: 200px; height: 200px; overflow: hidden;"> <!-- I need this to do a css transition scale effect -->
  5.                         <img src="image1" alt=""/>
  6.                   </div>
  7.                   <div class="image2" style="width: 200px; height: 200px; overflow: hidden;"> <!-- I need this to do a css transition scale effect -->
  8.                         <img src="image3" alt=""/>
  9.                   </div>
  10.                   
  11.                   <!-- and so on (imagine I have 20 pictures here) -->
  12.             </div>
  13.       </div>
  14. </div>

Thanks in advance