Gallery JQuery .show(), .hide() dan .toggle()

by lovromar

HTML

<div id="test">
<button id="wedding">Wedding</button>
<button id="personal">Personal</button>
<button id="portrait">Portraits</button>
<button id="landscape">Landscape</button>
<button id="showall">Show All</button>
</div><!-- #test-->

<div id="clear" class="clearfix"></div>

<div id="test">
    <div class="wedding post">
        <img src="http://img17.imageshack.us/img17/1092/84240771.png"/><div class="text">
        </div>
    </div>
<div class="portrait post"><img src="http://img818.imageshack.us/img818/2775/43599476.png"/><div class="text"></div></div>
<div class="personal post"><img src="http://img545.imageshack.us/img545/4374/73097316.png"/><div class="text"></div></div>
<div class="wedding post"><img src="http://img69.imageshack.us/img69/2830/85873376.png"/><div class="text"></div></div>
<div class="wedding post"><img src="http://img23.imageshack.us/img23/7008/39306010.png"/><div class="text"></div></div>
<div id ="test" class="portrait post"><img src="http://img23.imageshack.us/img23/7008/39306010.png"/></div>
</div><!-- #test2 -->

CSS

body {padding:30px;}

.post {
  background-image:url('http://img835.imageshack.us/img835/2490/26264397.png'); 
  height:210px;
  width:210px;
  margin:0 10px 80px 0;
  float:left;
}
.text{
  height:31px;
  width:201px;
  margin:10px;    
}
#overlay {
    display: none;
    height:144px;
    width:211px;
}

/* clearfix hack */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

JavaScript

$('button').click(function() {
    $('div.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});