KATC is a highly configurable carousel widget, intended for lists of thumbnails. When called against a list of hyperlink-wrapped images, this plugin progressively enhances the list to a keyboard-accessible, infinitely looping, carousel.

Whenever a focusable element within the widget has the focus, the arrow keys may be used to rotate the carousel. Unplug your mouse and try it!

Why Another Carousel?

In contrast to other carousels and slider widgets, the item(s) in view may be given the focus via the keyboard.

This makes KATC especially useful for when several thumbnails are in view and clicking on a thumbnail results in a larger version of the image being shown. While this UI pattern is common with carousels, it's frequently limited to mouse use.

Keyboard accessibility is important to many users, including those with motor impairments and hand tremors.

KATC is even fully keyboard accessible in Opera!

Code Playground

jump to result (Unlike KATC itself the code editors are not keyboard accessible as they trap the focus.)

HTML

The plugin is called against one or more div elements, each of which contains a single ul or ol element.

Using this existing markup as a guide, try changing the number of list items and the src attribute for the images. Images from lorempixum are used here so that their dimensions are easily modified. Please see note about image dimensions.

The markup which KATC progressively enhances:(if empty please reload page)

JavaScript Options

The thumbnails need not all have the same two dimensions, but the largest dimension on the largest image must be specified using the imageSize option. (Automatic detection is a to-do).

The maximum number of images in view may be configured with the thumbsPerFrame option. When the thumbnails in the list are of varying dimensions and/or orientations, a value for thumbsPerFrame of greater than 1 is, from an aesthetic point of view, not recommended.

Options object passed to $('#my-thumbnails').katc():(to use the defaults clear the box)

Custom CSS

Unless otherwise noted, change only the values of the CSS properties used here. For example, use only the width and height properties with .arrow-bounding-box-dimensions.

As shown here, class names are preceeded with the outer div’s ID selector and a space. (This allows for more than one instance of KATC on a page).

This custom CSS is typically stored in a file called katc-user.css.

CSS to override the default styles:(to use the defaults clear the box)

N.B. The code playground imposes a performance penalty that is not native to KATC.

Keyboard-related Behaviour Of KATC

Providing keyboard access for a carousel widget throws up a number of interesting complications and design decisions. Below is the list of tests used to check that the behaviour of KATC is in accordance with the design decisions taken. "jump-to button" refers to the buttons that provide random access to the sets of items that the carousel displays.

Further Usability Notes

Because the jogger buttons are situated on either side of the carousel's viewport, they are not particularly convenient for backtracking when using the mouse. Given this, a value for the thumbsPerFrame option of more than 3 is not recommended especially when the widget is being used to display thumbnails with larger dimensions.

The jump-to buttons provide both a means of random access and a visual cue to the user of where they are in the data set. By design they may not be given the focus via the keyboard.

Browser Support

KATC has been successfully tested in the following browers:

Ubuntu 10.04
Chrome 13.0
Firefox 3.6
Opera 11.5
Windows XP
IE 7 (see notes)
IE 8
Firefox 1.5
Firefox 3.6
Safari 4.0

Notes For IE7 Compatibility

  • A patch to make vertical centering work in IE7 is a to-do
  • In order that the widget is rendered properly when the browser window is resized, IE7 requires body {position: relative;}
  • Use a DOCTYPE for standards-compliant mode

Required Files

To Do List

  • Patch for vertical centering in IE7
  • Applying padding to the jogger buttons is broken
  • Jogger button dimensions should default to the dimensions of jogger arrows (essential for Android)
  • Fix edge cases e.g. number of thumbnails < thumbsPerFrame
  • Simple API: rotate() and refresh()
  • Fix yet another problem that occurs in Opera only :-)
  • Super-duper blank-spaces-filling mechanism (watch this space)
  • Automatically detect completion of thumbnail downloads/retrieval from cache to allow for:
    • Automatic sizing of the carousel view port
    • Hiding the thumbnails until all downloads complete to avoid ALT text being displayed
  • Allow for vertical orientation
  • Prepend all CSS class names with 'katc-' to reduce chances of naming collisions
  • Allow for an image file to be specified for the arrows on the jogger buttons
  • JSLint and jQueryLint fixes
  • An HTML jQuery template for use with AJAX
  • Apply border to the containing div only in the event that JavaScript is enabled

Version History

  • 1.0.1 fixed problem caused by a Webkit issue
  • 1.0 initial public release

Code Playground To-Dos

  • AJAX request to check that lorempixum.com is up
  • Example presets
  • Unlike KATC itself, it's not fully keyboard accessible! (because of the code editors)