List and Grid view using Jquery and css

Hi Guys,

Today I come up with a tutorial for the web developers to do an interactive website..You can seen lots of similar Tutorials, But this one is very easy to understand and to implement in your site

First Step:

Create Html wire frame

<ul class=”display”>
<li></li>
<li></li>
<li></li>
</ul>

CSS For the above Created Html:

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;  /*–The left padding keeps the
content from flowing under the image–*/
font-size: 1.2em;
}
ul.display li .content_block a img{ /*–Double border technique–*/
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}

STEP2:

Fill the Html <li> Tag with the below pattern .

<li>
<div class=”content_block”>
<a href=”#”><img src=”sample.gif” alt=”” /></a>
<h2><a href=”#”>Image Name</a></h2>
<p>Description goes here</p>
</div>
</li>

STEP 3:

Create a CSS for alternate Grid View

ul.thumb_view li{ width: 250px; } /*–Switch the width
to accommodate for the three column layout–*/</span>
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; }

Step 4: Add Switch Button 

Use above image for switch Option. Instead you can use text(only) so then there is no need of Below css

Add Below code in Your Html at the Top of a page

<a href=”#” class=”switch_thumb”>Switch Display</a>

CSS:

a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a.swap { background-position: left bottom; }

Step 5:

Add jQuery to things work….

<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>

That’s it!! hope this code helps someone