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.
