Cool Floating Image Gallery with jQuery ~ Web Speaks

Huh! Fed up with the Magento giant. This time lets play with my all time favourite jQuery. Here I am presenting a beautiful image gallery, no a picture frame with floating images. It contains many images with random floating effect, beautiful enough to be used in your web app. Lets see how does it look...
Live Demo Download Script

HTML Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webspeaks.in</title>
<link href="style/style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>

<body>

<div id="main">

 <div id="row1">
  <div id="frame0">
   <!-- Pic 1 Starts-->
   <div class="bl">
    <div class="br">
     <div class="tl">
      <div class="tr">
      <img src="images/lights1.jpg" id="img1" />
      Lorem ipsum dolor sit amet consectetur adipisicing elit
      1</div>
     </div>
    </div>
   </div>
   <div class="clear"> </div>
   <!-- Pic 1 Ends-->
  </div>
   
  <div id="frame1">
   <!-- Pic 2 Starts-->
   <div class="bl">
    <div class="br">
     <div class="tl">
      <div class="tr">
      <img src="images/lights2.jpg" />
      Lorem ipsum dolor sit amet consectetur adipisicing elit
      2</div>
     </div>
    </div>
   </div>
   <div class="clear"> </div>
   <!-- Pic 2 Ends-->
  </div>
 </div>
 
 <div id="row2">
  <div id="frame2">
   <!-- Pic 3 Starts-->
   <div class="bl">
    <div class="br">
     <div class="tl">
      <div class="tr">
      <img src="images/lights3.jpg" />
      Lorem ipsum dolor sit amet consectetur adipisicing elit
      3</div>
     </div>
    </div>
   </div>
   <div class="clear"> </div>
   <!-- Pic 3 Ends-->
  </div>
 
  <div id="frame3">
   <!-- Pic 4 Starts-->
   <div class="bl">
    <div class="br">
     <div class="tl">
      <div class="tr">
      <img src="images/bw3.jpg" />
      Lorem ipsum dolor sit amet consectetur adipisicing elit
      4</div>
     </div>
    </div>
   </div>
   <div class="clear"> </div>
   <!-- Pic 4 Ends-->
  </div>
 </div>
 
</div>

</body>
</html>

jQuery Code

$(document).ready(function()
{
 var curr;
 function start()
 {
  var rand = Math.floor(Math.random()*4)
 
  $thisFrame = '#frame'+rand;
  if(curr != rand)
  {
   anmt($thisFrame);
  }
 }

 function resetCss($thisFrame)
 {
  $($thisFrame).css({'left' : '100px'});
 }

 function anmt($thisFrame)
 {
  $($thisFrame).fadeTo('slow', 0.5, function() {
   $(this).animate({
    opacity: 1,
    left: '+=250',
 
   }, 5000, function() {
    $(this).animate({
     opacity: 0.3,
     left: '-=250',
    }, 5000, function() {
      $(this).fadeTo('slow', 0);
      resetCss($thisFrame);
     });
   });
  });
 }

 setInterval (start, 3000);
});

CSS Code

#main {width:100%; margin:0 auto; overflow:hidden;}

#row1 {padding:30px 0px 0px 0px;}
#row2 {padding:100px 0px 0px 0px;}

#frame0 {left:100px; padding:10px; position:absolute; display:block;}
#frame1 {left:250px; top:20px; padding:10px; position:relative; display:block;}
#frame2 {left:100px; padding:10px; position:absolute; display:block;}
#frame3 {left:250px; top:-20px; padding:10px; position:relative; display:block;}

.bl {background: url(../images/bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

And now your picture gallery is ready to use...