New Max Lookbook

by AaronLayton

HTML

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<div id="allProducts"></div>
    
    
<script type="text/html" id="product-template">
    {{#.}}
        <div class="product">
            <h2 class="pTitle">{{ Title }}</h2>
            <img src="{{ ImageUrl }}" />
        </div>
    {{/.}}
</script>

CSS

body { padding:50px;text-align:center;}

.product h2 { 
    color:#808080;
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
    margin:15px 5px;
    text-align:center;
}
.product {
    display:inline-block;
    margin:0 10px 10px 0;
    position:relative;
    text-align:center;
    width: 270px;
    
    -moz-opacity:.0; filter:alpha(opacity=0); opacity:.0;
    -webkit-transform: translateZ(0);
    
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.35);
    
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #ffffff 13%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(13%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#ffffff 13%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#ffffff 13%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#ffffff 13%); /* IE10+ */
background: linear-gradient(top,  #eeeeee 0%,#ffffff 13%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    
   -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.product:hover {
    z-index:20;
    
  -webkit-transform: rotate(0deg) !important; 
     -moz-transform: rotate(0deg) !important;
       -o-transform: rotate(0deg) !important; 
      -ms-transform: rotate(0deg) !important; 
          transform: rotate(0deg) !important;
    
    -webkit-transform: scale(1.10) !important; 
       -moz-transform: scale(1.10) !important;
         -o-transform: scale(1.10) !important;
     ...

JavaScript

var siteOptions = {};

$.getJSON('http://maxmobile.evdesign2.co.uk/ajax/lookbookitems?callback=?&itemsperpage=190', function(data) {
    // Get rid of the array that is being sent
    data = data[0];
        
    var processedData = $.map(data.AllProducts, function(product,key){
        product.ImageUrl =  data.ImageBase + data.LargeImg + product.ImageUrl;
        return product;
    });
    
    // Create it all
    $('#allProducts').append(  Mustache.render( $('#product-template').text() , processedData ) );
    
    // Animate them in with a rotation
    $.each($('#allProducts .product'), function(i,e){
        var r=Math.floor(Math.random()*10)-5;
        
        $(this).css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
        }).animate({opacity:100},'slow');
    });
});