desk image shuffle viewer

http://demo.marcofolio.net/polaroid_photo_viewer

by ecartdk

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div class="polaroid">
    <img src="http://demo.marcofolio.net/polaroid_photo_viewer/images/01_colosseum.png" alt="Colloseum" />
    <p>Coloseum in Rome</p>
</div>
<div class="polaroid">
    <img src="http://demo.marcofolio.net/polaroid_photo_viewer/images/02_vatican.png" alt="Vatican" />
    <p>Vatican</p>
</div>
<div class="polaroid">
    <img src="http://demo.marcofolio.net/polaroid_photo_viewer/images/03_forum_romanum.png" alt="Forum Romanum" />
    <p>Forum Romanum</p>
</div>
<div class="polaroid">
    <img src="http://demo.marcofolio.net/polaroid_photo_viewer/images/04_fiat_500.png" alt="Fiat 500" />
    <p>Fiat 500 - Typical Italian car</p>
</div>
<div class="polaroid">
    <img src="http://demo.marcofolio.net/polaroid_photo_viewer/images/05_me_gf.png" alt="Me and my girl in Florance" />
    <p>My girl and me in Florance</p>
</div>
<div class="polaroid">
    <img src="http://demo.marcofolio.net/polaroid_photo_viewer/images/06_venetian_gondolas.png" alt="Venetian Gondolas" />
    <p>Venetian Gondolas</p>
</div>

CSS

body, div, img, p { padding:0; margin:0; } body { overflow:hidden; background-image:url(http://demo.marcofolio.net/polaroid_photo_viewer/images/bg.jpg); } .polaroid { width:368px; height:376px; background-image:url(http://demo.marcofolio.net/polaroid_photo_viewer/images/polaroid-bg.png); position:absolute; } .polaroid img { width:335px; height:275px; margin:25px 0 0 15px; } .polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E; margin-top:15px; }

JavaScript

$(".polaroid").each(function (i) {         var tempVal = Math.round(Math.random());         if(tempVal == 1) {             var rotDegrees = randomXToY(330, 360); // rotate left 
                                                                                                                              } else {             var rotDegrees = randomXToY(0, 30); // rotate right 
                                                                                                                                                  }                  // Internet Explorer doesn't have the "window.innerWidth" and "window.innerHeight" properties        
                                               if(window.innerWidth == undefined) {              var wiw = 1000;             var wih = 700;         } else {             var wiw = window.innerWidth;             var wih = window.innerHeight;             }                  var cssObj = { 'left' : Math.random()*(wiw-400),             'top' : Math.random()*(wih-400),             '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only   
                                                                                                                                      'tranform' : 'rotate('+ rotDegrees +'deg)' }; // added in case CSS3 is standard  
                                               $(this).css(cssObj);     });          // Set the Z-Index (used to display images on top while dragging) 
    var zindexnr = 1;          // boolean to check if the user is dragging  
    var dragging = false;          // Show the polaroid on top when clicked on 
    $(".polaroid").mouseup(function(e){         if(!dragging) {             // Bring polaroid to the foreground  
        zindexnr++; 
        var cssObj = { 'z-index' : zindexnr,             'transform' : 'rotate(0deg)',     // added in case CSS3 is standard  
                       '-webkit-transform' : 'rotate(0deg)' };  // safari only  
        $(this).css(cssObj);       ...