LSparrow Works

by LyndseyB

HTML

<div id="latest">
    <span class="main"><a href="#latest-work"> Latest Work </a></span>
    <span><a href="#murals"> Murals </a></span>
    <span><a href="#canvases"> Canvases </a></span>
    <span><a href="#arts"> Arts </a></span>
   
    <!-- DEFAULT DIV -->
    <div id="latest-work" class="works"> 
        <div class="imgWrap"><img src="http://i49.tinypic.com/2vtcvlz.jpg" /></div>
    </div>
    
    <div id="murals" class="works"> 
        
    </div>
    
    <div id="canvases" class="works"> 
        
    </div>
    
    <div id="arts" class="works"> 
        
    </div>
</div>

CSS

body,html { padding:0; margin:0; }
#latest { margin-top: 20px; }
#latest span {
    float:left; 
    display:block;
    -webkit-box-shadow: 0 8px 6px -6px #ddd;
    -moz-box-shadow: 0 8px 6px -6px #ddd;
    box-shadow: 0 8px 6px -6px #ddd;
    width:18.333333333%;
    text-align:center;
    margin:0 3.333333%;   
}

#latest span:not(.main) {    
    background:#FF99CC;            
}

#latest span.main {  
  background:#e3e2de; 
  color:white;
}

#latest span a {   
    display:block;
    text-decoration:none;         
    padding:10px 0px;
    color:black;
}
.works {
    display:block;
    margin:30px 0;
}

/*
.imgWrap {
    float:left;
    width:18.333333333%;
    margin:10px 3.333333%;      
}

.imgWrap img {       
    width:100%;       
}  
*/

.imgWrap { 
    float:left;   
    width:18.333333333%;    
    margin:0 3.333333%;       
    position:relative;
    height:100px;   
    overflow:hidden;
}

.imgWrap img {   
    position:absolute;    
    opacity: 0.5;
    height: 200px;
    top:10%;
    left: -50px; 
 }

JavaScript

$(function() {
    //hide all except for latest-works
    $('#murals,#canvases,#arts').hide();
    
    //create images on fly
    for (var i=1; i<=8; i++) {
        $('#latest-work,#canvases').append("<div class='imgWrap'><img src='http://i49.tinypic.com/so9xg4.jpg' /></div>");
        
        if(i<4) {
        $('#murals,#arts').append("<div class='imgWrap'><img src='http://i47.tinypic.com/2vtcvlz.jpg' /></div>"); 
        }
    }    
    //main click function
    $('#latest span a').hover(function() {
        $(this).css("background", "#eeeeee");
    }, function() {
         $(this).css("background", "")
    }).click(function() {
        //get href
        to = $(this).attr("href");              
        //get all the image elements in the clicked link
        elements = $(to+' .imgWrap').get();        
        //create a function that will randomise
        getRandom = function(max) {
           return Math.floor(Math.random() * max);
        },
        //create the shuffle 
        shuffled = $.map(elements, function(){
           var random = getRandom(elements.length),
           randEl = $(elements[random]).clone(true)[0];
           elements.splice(random, 1);
           return randEl;
        });
        
        //shuffle
        $(to+' .imgWrap').each(function(i){            
            $(this).replaceWith($(shuffled[i]));             
        });

        //hide open toggle
        $('#latest div').not('.imgWrap').hide();  
        //fade in new div
        $(to).fadeIn('slow');        
    });     

    //img hover zoom
     $('.works img').hover(function() {
        $(this).css("cursor","pointer").animate({
            opacity:'1',
            height:'100px',
            left:'0',
            top:'10%'            
        }, 200);
    }, function() {
      $(this).animate({
            opacity:'0.5',
            height:'200px',
            left:'-50px',
            top:'10%'
        }, 200);  
    });
});