Switch display between thumbnail and summary view with jquery and CSS

Some websites have two modes for displaying : summary view (included thumbnail and summary text )and thumbnail view (only thumbnail) ,especially gallery or portfolio websites . Just click and website turn into thumbnail or summary view .With this effect , website will be more interactive to users . In addition , the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view. I've read an tutorial for making this effect in http://designm.ag website ,and I think it maybe helpful to you so I write down it here .






You can see the live demo here

Enough ? Now ,here is the tutorial for making this
1,As usual ,we need a HTML/Javascript widget . Add one into your blog layout .
2,Adding this CSS code to widget content for styling elements :

<style type="text/css">
body {
    margin: 0;
    padding: 50px 0 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    background: #111 url(http://www.sohtanaka.com/web-design/examples/display-switch/body_bg.jpg) no-repeat center top;
    color: #fff;
}
* {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}
h1 {
    font: 5em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    margin-bottom: 20px;
}
h1 span {     color: #e7ff61; }
h1 small{
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #ccc;
}

.container {
    width: 758px;
    margin: 0 auto;
    padding-bottom: 100px;
    overflow: hidden;
}
ul.display {
    float: left;
    width: 756px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    background: #222;
}
ul.display li {
    float: left;
    width: 754px;
    padding: 10px 0;
    margin: 0;
    border-top: 1px solid #111;
    border-right: 1px solid #111;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
ul.display li a {
    color: #e7ff61;
    text-decoration: none;
}
ul.display li .content_block {
    padding: 0 10px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 5px;
    font-weight: normal;
    font-size: 1.7em;

}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 245px;
    font-size: 1.2em;
}
ul.display li .content_block a img{
    padding: 5px;
    border: 2px solid #ccc;
    background: #fff;
    margin: 0 15px 0 0;
    float: left;
}

ul.thumb_view li{
    width: 250px;
    height: 184px;
}
ul.thumb_view li h2 {
    display: inline;
}
ul.thumb_view li p{
    display: none;
}
ul.thumb_view li .content_block a img {
    margin: 0 0 10px;
}


a.switch_thumb {
    width: 122px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    margin: 10px 0;
    display: block;
    background: url(http://www.sohtanaka.com/web-design/examples/display-switch/switch.gif) no-repeat;
    outline: none;
    text-indent: -9999px;
}
a:hover.switch_thumb {
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }


</style>

3,Here is the HTML code  :
<a href="#" class="switch_thumb">Switch Thumb</a> 
<ul class="display">
    <li>
        <div class="content_block">
            <a href="your_url_1"><img src="your_thumbnail_image_1"  /></a>

            <h2><a href="your_url_1">Title of item 1</a></h2>
            <p>summary 1 goes here</p>
        </div>
    </li>

<li>
        <div class="content_block">
            <a href="your_url_2"><img src="your_thumbnail_image_2" /></a>

            <h2><a href="your_url_2">Title of item 2</a></h2>
            <p>summary 2 goes here</p>
        </div>
    </li>   
....................
</ul>
Change the value (where I marked red) to your image and data . You can add more <li>...........</li> for more content .
4,Now, the last step : adding Jquery code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("a.switch_thumb").toggle(function(){
      $(this).addClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").addClass("thumb_view");
         });
      }, function () {
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").removeClass("thumb_view");
        });
    });

});
</script>

Ok ,Save the widget and we are done . You can check the result in web browsers.

How it work

when we open the page ,it display in summary mode ( thumbnail and summary text ) ,when you click on switch display button ,the Jquery script will change the HTML in step 3 by :
-Add class 'swap' to <a href="#" class="switch_thumb">Switch Thumb</a>  , so change the state of switch button as you see
-Add class 'thumb_view' to <ul> element . In CSS code , style of this 'thumb_view' class will hide the text and arrange thumbnail as we see in thumbnail mode .
To go back summary mode ,you click again the switch button .When you click that button ,all the class 'swap' and 'thumb_view' will be removed ,so summary text will be displayed and page layout change to summary mode .
That's all