List/Grid View Switcher with fade-in/out transitions using jQuery

In almost every e-commerce website that you are designing, the feature to switch between list and grid view is very essential to ...




In almost every e-commerce website that you are designing, the feature to switch between list and grid view is very essential to facilitate better display of the huge product catalog. This is very simple to achieve using jQuery, as you can visualize the very minimal version in the jsfiddle showcased here.

To make this more complete, I experimented showcasing product catalog with fade-in and fade-out transitions while switching between grid and list views. In this post, let us see how to create fading list/grid view switcher with components to display product catalog using jQuery and css.



1. First let us prepare the content to be dynamically styled according to the view selected. I have used font-awesome icons for displaying list and gridview switch controls in the demo and it is absolutely optional, you can choose to use buttons or links. So first let us place the switching controls inside body tag.

<div id="viewcontrols">
       <a class="gridview">
         <i class="fa fa-th fa-2x"></i>Grid
       </a>
       <a class="listview active">
         <i class="fa fa-list fa-2x">List</i>
       </a>
</div>


Next let us add an unordered list containing product details. Each list-item represents one product and I have displayed only one list below, since it is the same for all products. In the demonstration, I have used eight products, that means I have used the list-item eight times.

<ul class="list">
    <li>
        <img src="images/barbie_8.jpg" height="250px" width="250px"/>
 <section class="list-left">
 <span class="title">PRODUCT NAME</span>
 <p>Product description goes here. Aliquam tincidunt diam varius 
                 ultricies auctor. Vivamus faucibus risus tempus, 
                 adipiscing justo
        </p>
 <div class="icon-group-btn">           
  <a title="Add to Cart" href="javascript:void(0);" class="btn-cart"> 
  <span class="icon-cart"></span>
  <span class="icon-cart-text">
   Add To Cart      
  </span>
  </a>
  <a title="Add to wishlist" href="#" class="btn-wishlist">
  <span class="icon-wishlist"></span>
  <span class="icon-wishlist-text">
   Add To Wishlist      
  </span>
  </a>
  <a title="Add to Compare" href="#" class="btn-compare">
  <span class="icon-compare"></span>
  <span class="compare-text">
   Add To Compare      
  </span>
  </a>
 </div>  
 </section>
 <section class="list-right">
  <span class="price">$50</span>
  <span class="detail"><a class="button">Details</a></span>
 </section>
 </li>
</ul>

2. Next we need two different css styles for displaying list and grid views. I have not displayed miscellaneous css styles here that are not mandatory to achieve list and grid layouts. However if you like to design a product catalog exactly like what is shown in the demonstration you can download this project and use it.

LIST LAYOUT

ul.list{
width: 800px;
margin-right: 15%;
margin-left: 15%;
}
ul.list li {
background: #F7F7F7;
border-bottom: 1px dotted #CCC;
margin-bottom: 50px;
padding-right: 20px;
height: 250px;
}
ul.list li img{
float: left;
margin-right: 10px;
padding-bottom: 0;
border-bottom: 2px solid transparent;
}
ul.list li p{
overflow:hidden;
word-wrap:break-word;
width:250px;
}
ul.list li .title{
overflow:hidden;
word-wrap:break-word;
font-size:24px;
}
ul.list li .list-left{
width:300px;
position:absolute;
padding-left:260px;
}
ul.list li .list-right{
width:150px;
float:right;
}
ul.list li .price{
float:right;
font-size:56px;
display: block; 
margin-right: 10px; 
text-align: right;
width:100%;
color:#4FAFC2;
}
ul.list li .detail{
float:right;
display:block;
}

GRID LAYOUT

ul.grid li { float: left; width: 265px; height: 440px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC;margin:20px; background:#F7F7F7; }
ul.grid li img{text-align:center;width:100%;}
ul.grid li p{display:none;}
ul.grid li .list-left{text-align:left;font-size:24px;margin-left: 10px;margin-top:10px;}
ul.grid li .icon-group-btn{font-size:14px;}
ul.grid li .list-right{display:block;width:100px;margin-left: 10px;}
ul.grid li .list-right .price{font-size:24px;display:block;color:#4FAFC2;}
ul.grid{
width: 950px;
margin-left: 10%;
}


3. Finally let use jQuery to switch between grid and listviews with fade-in and fade-out effect.

<script type="text/javascript">
$(document).ready(function () {    
var elem=$('ul');      
$('#viewcontrols a').on('click',function(e) {
 if ($(this).hasClass('gridview')) {
  elem.fadeOut(1000, function () {
  elem.removeClass('list').addClass('grid');
  elem.fadeIn(1000);
         });      
 }
 else if($(this).hasClass('listview')) {
  elem.fadeOut(1000, function () {
  elem.removeClass('grid').addClass('list');
  elem.fadeIn(1000);
        });         
 }
});
});
</script>

That is all. Do not forget to include jQuery library reference inside head tag of your html. Enjoy the demo and download the project to see how other components inside every list-item is styled.



If you like my articles and find them useful, do signup for newsletter in the box below to get my articles delivered directly to your inbox. Thanks for reading!

Subscribe to GET LATEST ARTICLES!


Related

Web Design 5351872184681285298

Post a Comment

  1. Unable to locate the source code. please share the same.

    ReplyDelete
    Replies
    1. Hi,

      Updated the correct link. Please try now. Sorry for the inconvenience.

      Thanks,
      Priya

      Delete
  2. Bu çok güzel ya :)

    This great work! :)

    ReplyDelete
  3. Please I need the source code, link is not available. Thanks

    ReplyDelete
  4. what to do if I want to show gridview first by default?

    ReplyDelete
  5. what to do if I want to show gridview first by default?

    ReplyDelete
  6. The feedback can be considered as a step towards improvement as a means to achieve enhanced customer satisfaction. Salesforce training in Hyderabad

    ReplyDelete
  7. If you opt for iptv m3u subscription, you can record your desired TV shows and watch them later based on your convenience. The service allows you to move a lot of PC-based features to your TV. Among the primary benefits of the solution is that you can access a host of networks. You can select any one of your preferred networks and also spend for those networks just.

    ReplyDelete
  8. The send line of code consist some errors which may have causing errors. We at cheap dissertation writing service Uk face these kind of bugs everyday and resolve them

    ReplyDelete
  9. Your blog posts on reading are so full of great insights.

    ReplyDelete
  10. Replies
    1. your blog post is nice. Osservi Outsource Services is a leading service provider in the field of Bookkeeping, Accounting, Payroll & Company Formation has been transforming business across Ireland.

      Delete

emo-but-icon

SUBSCRIBE


item