http://throwingupthew.com/index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css" title="Westside Girls">

/* The page body */
html, body {
background: #333;
overflow: hidden;
font-family: Helvetica, Arial, sans-serif;
}

/* The div holding the wooden table img tag */
#wooden-table {
position: absolute;
left: -5000px;
}

/* The light table itself */
#lighttable {
position: relative;
width: 1200px;
height: 500px;
background: #000 url(images/woden-table.jpg);
padding: 70px;
margin: 0 auto;
border: 5px solid #111;
display: none;
}

/* Photos on the light table */
#lighttable img {
border: 0px solid #000;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
position: absolute;
left: -9999px;
top: -9999px;
}

/* The description at the top of the page */


.auto-style1 {
text-align: center;
color: #1BD71B;
}


.auto-style2 {
color: #1BD71B;
}
.auto-style3 {
text-decoration: none;
}


</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript">

var newImageZIndex = 1; // To make sure newly-loaded images land on top of images on the table
var loaded = false; // Used to prevent initPhotos() running twice

// When the document is ready, fire up the table!
$( init );

// When the wooden table image has loaded, start bringing in the photos
function init() {
var woodenTable = $('#wooden-table img');
woodenTable.load( initPhotos );

// Hack for browsers that don't fire load events for cached images
if ( woodenTable.get(0).complete ) $(woodenTable).trigger("load");
}

// Set up each of the photos on the table

function initPhotos() {

// (Ensure this function doesn't run twice)
if ( loaded ) return;
loaded = true;

// The table image has loaded, so bring in the table
$('#lighttable').fadeIn('fast');

// Process each photo in turn...
$('#lighttable img').each( function(index) {

// Set a random position and angle for this photo
var left = Math.floor( Math.random() * 1000 + 50 );
var top = Math.floor( Math.random() * 250 + 50 );
var angle = Math.floor( Math.random() * 40 - 20 );
$(this).css( 'left', left+'px' );
$(this).css( 'top', top+'px' );
$(this).css( 'transform', 'rotate(' + angle + 'deg)' );
$(this).css( '-moz-transform', 'rotate(' + angle + 'deg)' );
$(this).css( '-webkit-transform', 'rotate(' + angle + 'deg)' );
$(this).css( '-o-transform', 'rotate(' + angle + 'deg)' );

// Make the photo draggable
$(this).draggable( { containment: 'parent', stack: '#lighttable img', cursor: 'pointer' } );

// Hide the photo for now, in case it hasn't finished loading
$(this).hide();

// When the photo image has loaded...
$(this).load( function() {

// (Ensure this function doesn't run twice)
if ( $(this).data('loaded') ) return;
$(this).data('loaded', true);

// Record the photo's true dimensions
var imgWidth = $(this).width();
var imgHeight = $(this).height();

// Make the photo bigger, so it looks like it's high above the table
$(this).css( 'width', imgWidth * 1.5 );
$(this).css( 'height', imgHeight * 1.5 );

// Make it completely transparent, ready for fading in
$(this).css( 'opacity', 0 );

// Make sure its z-index is higher than the photos already on the table
$(this).css( 'z-index', newImageZIndex++ );

// Gradually reduce the photo's dimensions to normal, fading it in as we go
$(this).animate( { width: imgWidth, height: imgHeight, opacity: .95 }, 1200 );
} );

// Hack for browsers that don't fire load events for cached images
if ( this.complete ) $(this).trigger("load");

});

}

</script>

</head>
<body>

<p class="auto-style1"><strong>
Weeeeeeeeeeeeesssssssssssssssssssttsssiiiiiiidddddddddeeeeeeeeeeee!!!!!!!!!!</strong></p>

<div id="wooden-table"><img src="images/wooden-table.jpg" alt="Wooden table image" /></div>

<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" />
<img src="http://throwingupthew.com/girls/04.jpg" alt="04" />
<img src="http://throwingupthew.com/girls/05.jpg" alt="05" />
<img src="http://throwingupthew.com/girls/06.jpg" alt="06" />
<img src="http://throwingupthew.com/girls/07.jpg" alt="07" />
<img src="http://throwingupthew.com/girls/08.jpg" alt="08" />
<img src="http://throwingupthew.com/girls/09.jpg" alt="09" />
<img src="http://throwingupthew.com/girls/10.jpg" alt="10" />

<img src="http://throwingupthew.com/girls/11.jpg" alt="11" />
<img src="http://throwingupthew.com/girls/12.jpg" alt="12" />
<img src="http://throwingupthew.com/girls/13.jpg" alt="13" />
<img src="http://throwingupthew.com/girls/14.jpg" alt="14" />
<img src="http://throwingupthew.com/girls/15.jpg" alt="15" />
<img src="http://throwingupthew.com/girls/16.jpg" alt="16" />
<img src="http://throwingupthew.com/girls/17.jpg" alt="17" />
<img src="http://throwingupthew.com/girls/18.jpg" alt="18" />
<img src="http://throwingupthew.com/girls/19.jpg" alt="19" />
<img src="http://throwingupthew.com/girls/20.jpg" alt="20" />

<img src="http://throwingupthew.com/girls/21.jpg" alt="21" />
<img src="http://throwingupthew.com/girls/22.jpg" alt="22" />
<img src="http://throwingupthew.com/girls/23.jpg" alt="23" />
<img src="http://throwingupthew.com/girls/24.jpg" alt="24" />
<img src="http://throwingupthew.com/girls/25.jpg" alt="25" />
<img src="http://throwingupthew.com/girls/26.jpg" alt="26" />
<img src="http://throwingupthew.com/girls/27.jpg" alt="27" />
<img src="http://throwingupthew.com/girls/28.jpg" alt="28" />
<img src="http://throwingupthew.com/girls/29.jpg" alt="29" />
<img src="http://throwingupthew.com/girls/30.jpg" alt="30" />

</div>

<p class="auto-style1"><strong>
©Wade Winiata 2003-2013</strong></p>
<p class="auto-style1">
<a class="auto-style3" href="emailto:wadewiniata@hotmail.com"><strong>
<span class="auto-style2">wadewiniata@hotmail.com</span></strong></a></p>


</body>
</html>



How do I randomize the order of the images? Is it done in the lighttable div? in a function further up?
Please keep in mind I will not know where to place any code/answer in index.html, I know nothing about javascript or html apart from adjusting values to alter the outcome.
I use web expression 4 free version.


Thank you.