This is a message.

Scrollable Playlists

Use CSS & Javascript to create amazing playlists

standalone demo

The best skill for implementing a custom playlists is definitely the mastery of the CSS language. The following playlist is build with three images and the rest of the look and feel comes from this CSS file.

The scrolling in this playlist is implemented using the jquery.scrollable tool. You can scroll through the items by clicking on the arrows, using the cursor keys, or with your mouse wheel.

Caveat: If you use the playlist plugin's manual configuration like in the above demo, make sure to set the scrollable tool's circular property to false (the default) in conjunction with the playlist plugin.

With the playlist plugin's internal configuration install the player before the scrollable setup.

Configuration

// set up the player
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
clip: {baseUrl: 'http://stream.flowplayer.org'}
 
// use playlist plugin to enable playlist items work as movie clips
}).playlist("div.clips");
 
// set up scrolling for the playlist elements
$("div.playlist").scrollable({
items:'div.clips',
vertical:true,
next:'a.down',
prev:'a.up'
});

JavaScript

Here is the documentation for the playlist plugin.