Erik Kallevig Web Design

From the Blog

jShowOff: a jQuery Content Rotator Plugin

I’ve released my first ‘official’ jQuery plugin called jShowOff (I know, the name’s a little silly but I wanted something unique). It’s a simple plugin, but it serves a common need: a content rotator, often seen at the top of homepages to promote content within a site. It’s ‘official’ because it actually extends the jQuery object and follows the few design patterns recommended by the jQuery team. I started with an old slideshow script I wrote a while ago, then heavily modified it and added a number of options. Check out the demo and documentation page and let me know what you think!

How it works

Right now, it works by taking all the child <div>’s from the container <div> on which the method was invoked and storing them in an array for adding to and removing from the container. Eventually I’ll modify this to accept any child elements of the container, but for right now, it’s just <div>’s. A counter is used to keep track of the current slide and to know when the first and last slides have been reached.

I used the same caching mechanism as the slideshow script, which simply loads each div into an array (and subsequently into the browser’s cache). The slideshow script had an option to set the number of items to cache ahead of time, since it dealt with long lists of photos, but I removed it here, since usage will likely only need to support a small number of items.

Getting started

The required markup for jShowOff is a parent <div> with one or more child <div>’s, which will be used as the ’slides’. The following is a basic example:

<div id="features">
<div><p>This is a slide!</p></div>
<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#features').jshowoff(); });
</script>

Customize it!

jShowOff currently has a few options for customization, hopefully more in the future. Pass these settings as an object to the .jshowoff() method like this:

$('#features').jshowoff({ speed:1500, links: false }); });

Property	Type	Default	Description
speed	integer	3000	Time each slide is shown in milliseconds.
changeSpeed	integer	600	Speed of transition in milliseconds.
controls	boolean	true	Whether to create & display controls (Previous, Next, Play/Pause).
links	boolean	true	Whether to create & display numeric links to each slide.
autoPlay	boolean	true	Whether to start playing immediately.

The demo uses a very basic style, but I’ve purposely isolated all the generated elements with specific id’s and classes to allow users to skin it as they please.

There are plenty of features I’d like to add and I’ll be keeping track of them on the demo page, so hopefully it will grow in time. I also used this project as an excuse to learn Git version control in conjunction with GitHub. Both have been pretty easy to pick up and GitHub has some really good resources for jumping in (besides their very nice web tools). It’s not hard to see why the jQuery team is now using them. Enough talk, now give it a try and tell me what you think!

January 24th, 2010

The new site is live, finally

After hunkering down for many hours the new site is officially live. The design process took a few extreme detours before I settled on a good compromise. My first plan was a very basic three-column layout with a primary left column for the portfolio and two narrower, secondary right columns for my services list and biographical information. I appreciated its simplicity but I eventually soured on the muted, brown earth tones that seemed drab compared to other more engaging sites.

Then I moved into a minimalism phase with Apple as my model. One of Apple’s defining strengths is its ability to destroy the unnecessary. By removing all distractions, the user can direct its focus to the task at hand. Minimizing visual noise requires identifying what is truly necessary, down to minor details like borders and background colors.

So with this goal I scrapped my first attempt and tried to focus the user on one thing: my portfolio. I had a fairly good concept in place before I realized that the ideal I was hoping to espouse was not entirely applicable to my situation. Apple is an established brand with a devoted user base already familiar with many of its products and using the home page to focus almost completely on a new or updated product is a logical approach.

I still wanted focus and simplicity, but I had to make room for basic pieces of information like an ‘About’ section and a list of services. I also decided on a bold, engaging color scheme that attempts to remain readable. I took navigation usability a little further by removing links to the page you’re on (with WordPress conditionals and some tricky CSS). WordPress’ heavy use of includes can lead to inappropriate markup so I spent some time adding conditionals to make sure the H1 tag on every page was actually describing that page’s content. I’m still unsatisfied with a few minor elements, but I have what I hope is a usable, accessible, and attractive design!

May 18th, 2008

Blog Archive ›