This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch.
I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar galleries. The design itself is quite simple to create and there isn’t much required jQuery at all. Check out my live sample demo below.
Live Demo – Download Source Code
Getting Started
All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of the jQuery library and include this into the document header. I’ve also created my own stylesheet for organizing the lists and the page layout.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Switch Display Options - DesignMag Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself doesn’t really “begin” until we get to the #content div. This specifically holds the main page content including our list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a clearfix to keep the position of floated elements.
<div id="w">
<span class="options">Switch Options:
<a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png" alt="list"></a>
<a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png" alt="thumbnails"></a>
</span>
<!-- icons: http://findicons.com/pack/1689/splashy/ -->
<div id="content">
<ul id="listdisplay" class="clearfix">
<li class="clearfix">
<span class="listimg"><a href="http://dribbble.com/shots/1314496-80-s-Wrestlers-Hulk-Hogan" target="_blank"><img src="images/01-hulk-hogan.jpg"></a></span>
<span class="innercontent">
<h2>Hulk Hogan</h2>
<p>In non gravida nulla, quis vehicula velit. Praesent ac felis vel tortor auctor tincidunt. In non luctus neque. In congue molestie pretium. Sed vitae cursus risus. Pellentesque feugiat tortor massa, ut aliquet justo fermentum vitae.</p>
</span>
</li><!-- row #1 -->
I’ve only copied over the beginning section of the page along with a single list item structure. There are 8 total items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two anchor links for sorting the content.
The first ID is #details-list which also has an active class attached to the anchor. This means we already have the details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which users can switch over and change the view. These images are found in the Splashy pack along with many other fantastic icons.
Page Design with CSS
All the typical page resets can be found in my stylesheet along with an external webfont hosted through Google. The HTML page background uses a repeating image Cartographer from Subtle Patterns.
.options {
display: block;
text-align: right;
font-size: 1.2em;
line-height: 16px;
font-weight: bold;
color: #eee;
margin-bottom: 8px;
}
.options .sorticon {
position: relative;
top: 3px;
}
.options .sorticon img {
opacity: 0.6;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.options .sorticon img:hover {
opacity: 1.0;
}
.options .sorticon.active img {
opacity: 1.0;
}
Each of the image icons uses a CSS3 transition effect. When you hover or click onto a new icon, the opacity won’t change instantly. Instead it smoothly changes over in all CSS3-compliant browsers(which also support the opacity property). Each icon is positioned relative to the container so they can be aligned more evenly.
/* list styles */
#listdisplay {
display: block;
}
#listdisplay li {
display: block;
width: 100%;
padding: 12px 8px;
margin-bottom: 1px;
border-bottom: 1px solid #aaa;
}
#listdisplay li a img {
display: block;
float: left;
padding: 5px;
border: 2px solid #bbb;
background: #fff;
margin-right: 20px;
}
#listdisplay li .innercontent h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 3.0em;
line-height: 1.35em;
margin-bottom: 4px;
color: #73ed95;
font-weight: bold;
}
#listdisplay.thumbview li {
display: block;
width: 360px;
float: left;
margin-right: 10px;
margin-bottom: 7px;
border: 0;
}
#listdisplay.thumbview li a img {
display: block;
float: none;
margin: 0 auto;
margin-bottom: 4px;
}
#listdisplay.thumbview li .innercontent {
display: block;
text-align: center;
}
#listdisplay.thumbview li .innercontent h2 {
font-size: 2.2em;
}
#listdisplay.thumbview li .innercontent p {
display: none;
}
Getting into the list properties you will notice there isn’t much to be confused about. #listdisplay is always being used to contain the list, regardless of the view style. Without any extra classes we see the typical detail view. Using jQuery I can setup a new class .thumbview which will then reformat the items to show the thumbnail + image centered, no descriptive text.
You should feel free to mess around with the formatting and design grid to suit your own layout. Once we append the thumbnail view each list item becomes fixed at a width of 360px. Coupled with the margins & padding it leaves room for 2 items per line. Depending on your thumbnail size this value might change or adapt better for your audience.
Transitioning jQuery Effects
Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.
$(function(){
$('.options a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('active')) {
// do nothing if the clicked link is already active
return;
}
$('.options a').removeClass('active');
$(this).addClass('active');
var clickid = $(this).attr('id');
$('#listdisplay').fadeOut(240, function(){
if(clickid == 'thumbnails-list') {
$(this).addClass('thumbview');
} else {
$(this).removeClass('thumbview');
}
$('#listdisplay').fadeIn(200);
});
});
});
This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.
Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.
Finally once the logic has completed we can re-display the list view onto the page using fadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.
Live Demo – Download Source Code
Closing
I do hope this more updated tutorial can provide a template for building your own transitional layouts. jQuery is a powerful tool with tons of options for manipulating a website’s frontend design. Please feel free to download a copy of my tutorial codes and see what else you can build following this UI format.
Source: http://designm.ag/tutorials/jquery-display-switch/
No comments:
Post a Comment