jQuery Kwicks and CSS Image Sprites Tutorial

This is a catchy jQuery powered effect I have used in a couple of projects lately, so I thought of sharing it with you.
It uses the Kwicks for jQuery plugin from Jeremy Martin to which I’ve added a twist using CSS image sprites. This way the whole thing uses only one image. Extra effects can be added using the Easing plugin.

You can use this technique for a site’s header (Our Services or New Products), for a portfolio or product catalog or even for navigation. Code and editable PNG image files are avaialble for download on the demo pages.

• See Demo Here:  » Normal Kwicks
• Demo with Easing: » Kwicks with Easing

First, let’s see the html markup. You can find further examples and documentation on jMar’s blog, so I’ll cover this example only.

Markup is very simple, just assign the class .kwicks to an unordered list and a unique id (#kwicks_1, #kwicks_2 etc.) to each list item. I’ve used 4 for this tutorial, so here’s the code:
<ul class="kwicks">
<li id="kwick_1"><a href="http://www.apple.com/iphone" target="_blank">iPhone</a></li>
<li id="kwick_2"><a href="http://www.apple.com/macbookair" target="_blank">MacBookAir</a></li>
<li id="kwick_3"><a href="http://www.apple.com/imac" target="_blank">iMac</a></li>
<li id="kwick_4"><a href="http://www.apple.com/timecapsule" target="_blank">TimeCapsule</a></li>
</ul>
You’ll notice you can add links inside each list item, although you can skip this if you’re not going to link to anywhere.

CSS is basically used for assigning background positions to the list items, thus using the sprites technique. Here’s the code for the example in this tutorial. As I’ve mentioned, there is only one image used for this example, although you could use separate ones if it suits you better.
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 190px;
height: 140px;
margin-right: 0px;
background-image:url(../images/kwicks_bg.jpg);
background-repeat:no-repeat;
}
.kwicks li a{
display:block;
height:140px;
text-indent:-9999px;
outline:none;
}
#kwick_1 {
background-position:0px 0px;
}
#kwick_2 {
background-position:-400px 0px;
}
#kwick_3 {
background-position:-800px 0px;
}
#kwick_4 {
background-position:-1200px 0px;
}
#kwick_1.active, #kwick_1:hover {
background-position: 0 bottom;
}
#kwick_2.active, #kwick_2:hover{
background-position: -400px bottom;
}
#kwick_3.active, #kwick_3:hover {
background-position: -800px bottom;
}
#kwick_4.active, #kwick_4:hover {
background-position: -1200px bottom;
}
The main ul‘s position is set and list styling is cleared. Then the li-s are assigned their width, height and the background image. This is a bit tricky since you will have to calculate the visible area for each of the 3 states of the image. Here is an image explaining the 3 states.

Kwicks Image States

The CSS only covers the size of the list item in its normal state and the background position for each list element in their full (on :hover) state (as you can see in this example it uses increments of 400px since this is the width of the kwicks in their full state). We’ll cover more of this when we get to the image sprites.

Moving over to Javascript, remember of course to include the necessary scripts in you page’s header like this:
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.kwicks-1.5.1.js" type="text/javascript"></script
The easing plugin is optional if you don’t want to use any easing effects.
I have placed the kwicks code inside a function my_kwicks() which is being called when the dom is ready, but you can skip that step if you prefer:
function my_kwicks(){
$('.kwicks').kwicks({
duration: 300,
max: 400,
spacing: 0
});
}


$(document).ready(function(){
my_kwicks();
});


More on the available options for the kwicks plugin is featured on the creator’s page, and they are pretty self-explanatory anyway. The ones you should mind though are “max” and “spacing”. “max” in this example has a value of 400 and sets the maximum width in pixels a kwick can expand to and it should match the width of your image’s full state. “spacing” sets the spacing between the kwicks, which in this example I’ve set to 0.

If you want to use the easing effects, just declare them along with the other options like this:
$(document).ready(function() {
$('.kwicks').kwicks({
max : 400,
spacing : 0,
duration: 1500,
easing: 'easeOutBounce'
});
});
As you can see, I’ve skipped the function declaration in this case. Available effects are documented on easing’s website. Go crazy with them effects!

In the end, let’s take a look at the image used as background for the kwicks and what it should look like. As mentioned earlier, special care must be taken so that the 3 states a kwick can have do not end up looking weird. For this example I’ve used Fireworks to create the background image and you can download the editable PNG from the tutorial page. Here’s a screenshot of the file in Fireworks.

Kwicks in Fireworks

Basically you should calculate the area shown in each one of the 3 image states and make sure the kwicks are not overlapping or showing someone’s head chopped-off for example.
You have to create a file 4 times the width of the full state (in this example 4×400=1600px) and 2 times its height (2×140=280px). The top row will contain the sprites shown on the image’s normal and minimal states and the bottom row will contain the images which will show up on :hover in the kwicks’ full state. As you can see in the screenshot, the bottom row has more content (the Apple products text) as this is the content that appears when the user places the mouse over one of the kwicks.

Just be creative and give it the look you like. Obvious choices are different background colors for normal and full states, grayscale to color etc.

I have tried to give an extensive coverage of this effect, but as I’ve said before, you can visit the respective websites of the plugins and find out more by yourself. If you have any doubts and need help with configuring your own “kwick-ass” effect, just leave a comment and I’ll try to help.

Some final notes: the new version of the Kwicks plugin allows for vertical positioning as well, just check jMar’s blog. The font used in the PNG image is AquaBase, just replace it with the one you like if you don’t have this one. the PNG was edited with Adobe CS4 Fireworks CS4 and the 4 elements are grouped in sublayers inside the kwicks main layer. Images used are from the Apple website so Copyright goes to them. jQuery version 1.2.6 was used for the example but newer versions should work as well.

Related Entries

• FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration
• FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial
• Sleek Admin – a clean admin skin for your backend
• Create a live-update list effect with jQuery
• Creating a Polaroid Photo Effect In Photoshop