QMY Img Load & Rotate

by Lorena Brito

HTML

<div id="main-container">
<div class="absolute ui-draggable"><img src="http://display-dev.insteo.com/Uploads/photo_gallery_4_dusk_ship-950_avc121.jpg" class="image-container imgRotate3" style="opacity: 1; border-color: rgb(204, 132, 17); width: 200px; height: 200px; position: relative; top: 22.640589735936px; left: 42.306460987709px;"></div>


<div class="absolute ui-draggable"><img src="http://display-dev.insteo.com/Uploads/photo_gallery_3_ship-950_heh360.jpg" class="image-container imgRotate4" style="opacity: 1; border-color: rgb(204, 132, 17); width: 200px; height: 200px; position: relative; top: 22.429395447951px; left: 47.758664707538px;"></div>


<div class="absolute ui-draggable"><img src="http://display-dev.insteo.com/Uploads/photo_gallery_3_engine_room-950_tpt775.jpg" class="image-container imgRotate3" style="opacity: 1; border-color: rgb(204, 132, 17); width: 200px; height: 200px; position: relative; top: 22.094514527591px; left: 22.875616207504px;"></div>

<div class="absolute ui-draggable"><img src="http://display-dev.insteo.com/Uploads/photo_gallery_6_ship-950_pti638.jpg" class="image-container imgRotate4" style="opacity: 1; border-color: rgb(204, 132, 17); width: 200px; height: 200px; position: relative; top: 22.62225696235px; left: 25.913933197272px;"></div>
     </div>

CSS

body{
	margin: 0;
	padding: 0;
	background-color: black;
	cursor:none;
	/*overflow: hidden;*/
}

#wrapper {
	margin: 0;
	padding:0;
	min-width: 960px;
	background-image:url(../images/photosBG.png);
}

#test{
	width: 100%;
	z-index: 999;
	position: absolute;
	color: white;
	font-size: 18;
}

#header{
	z-index: 999;
	position: absolute;
	margin: 0;
	margin-top  /*\**/: -20px\9;
	margin-bottom  /*\**/: -20px\9;
	padding: 0;
	width: 100%;
	height: 180px;
}

.left-Header{
	float: left;
	padding:50px 50px 0 50px;
	font-family: 'Roboto Condensed';
	font-size: 48px;
	font-weight:700;
	color: rgb(204, 132, 17);
}

.right-Header{
	float: right;
	padding:62px 100px 0 0px;
	font-family: 'Roboto Condensed';
	font-size: 36px;
	color: rgb(204, 132, 17);
}

.clear { 
	clear: both;
}

#main-container{
	margin: 0;
	padding: 0;
	-webkit-background-size: stretch;
	-moz-background-size: stretch;
	-o-background-size: stretch;
	background-size: stretch;
	background-size: cover;
}

.image-container{
	width: 0px;
	Height: 0px;
	border-color: #CCCCCC;
	border-style: solid;
	border-width: .8em;
	-webkit-border-radius: .6em;
	-moz-border-radius: .6em;
	-o-border-radius: .6em;
	border-radius: .6em;
	-webkit-box-shadow: 0px 5px 10px black;
	-moz-box-shadow: 0px 5px 10px black;
	-o-box-shadow: 0px 5px 10px black;
	box-shadow: 0px 5px 10px black;
}

.absolute{
	position: absolute;
}

@-webkit-keyframes rotate6 {
	0% {-webkit-transform: rotate(400deg);}
	100% {-webkit-transform: rotate(-6deg);}	
}

.imgRotate6 {
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-name: "rotate6";	
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes rotate1 {
	0% {-webkit-transform: rotate(-550deg);}
	100% {-webkit-transform: rotate(-7deg);}	
}

.imgRotate1 {
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-name: "rotate1";	
	-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes rotate2 {
	0%...

JavaScript

function InOut( elem ){
 elem.delay()
     .fadeIn()
     .delay(10000)
     .fadeOut( 
               function(){ 
                   if(elem.next().length > 0)
                   {InOut( elem.next() );}
                   else
                   {InOut( elem.siblings(':first'));}
                         
                 }
             );
}

$(function(){
$('#main-container div').hide();
InOut( $('#main-container div:first') );

});

InOut();