Mario Lup Header

by Alin Guta

HTML

<div id="cimpoi">
    <h1>Cimpoi Scotian</h1>
    <p>Lemn de nuc<br />82 cm</p>
</div>
<div id="lira">
    <h1>Lira</h1>
    <p>Lemn de mar<br />34 cm</p>
</div>
<div id="quijote">
    <h1>Don Quijote</h1>
    <p>Lemn de plop<br />57 cm</p>
</div>


<div id="header">
    <div class="box left cimpoi">
        <img src="http://imagins.ro/images/1.jpg" style="width:100%; height:auto;" />
    </div>
    <div class="box center active lira">
        <img src="http://imagins.ro/images/2.jpg" style="width:100%; height:auto;" />
    </div>
    <div class="box right quijote">
        <img src="http://imagins.ro/images/3.jpg" style="width:100%; height:auto;" />
    </div>
</div>

CSS

body, html{
    font-family: Calibri;
    letter-spacing:2px;
    font-variant: small-caps;
}
#lira,
#cimpoi,
#quijote{
    border: 1px solid #d2d2d2;
    width:auto;
    line-height:15px;
    padding:0;
    margin:0;
    width:150px;
}
#quijote{
    width:200px;
    display:none;
}
#cimpoi{
    width:230px;
    display:none;
}
p,
h1{
    margin:10px 10px 10px 20px;
}


#header {
    list-style:none;
    width:500px;
    height:250px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.box {
    width:100px;
    height:100px;
    position:absolute;
    left:0;
    top:75px;
    opacity:0.3;
}
.left {
    left:0;
}
.center {
    width: 250px;
    height: 250px;
    top: 0;
    left: 125px;
    opacity: 1;
}
.right {
    left: 400px;
}

JavaScript

$('.box').click(function () {
    if ($(this).css('left') != '125px') {
        var l = ($(this).css('left') == '0px') ? 0 : 400;
        $(this).animate({
            width: 250,
            height: 250,
            left: 125,
            top: 0,
            opacity: 1
        }, 400);
        $('.active').animate({
            width: 100,
            height: 100,
            left: l,
            top: 75,
            opacity: 0.3
        }, 400);
        $('#header > .box').removeClass('active');
        $(this).addClass('active');
    }
});

$('.cimpoi').click(function(){
    $('#lira, #quijote').fadeOut(500);
    $('#cimpoi').delay(500).fadeIn(500);    
});
$('.lira').click(function(){
    $('#cimpoi, #quijote').fadeOut(500);
    $('#lira').delay(500).fadeIn(500);    
});
$('.quijote').click(function(){
    $('#cimpoi, #lira').fadeOut(500);
    $('#quijote').delay(500).fadeIn(500);    
});