Documentation

Layouts

There are several layouts to chose from


Album Cover Slider

Displays a carousel of 3 album covers. The middle cover is the current song, the left cover is the previous song and the right cover is the next song

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'album-covers'
        });
    

Single Album Cover

Displays the album cover for the current song

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'single-album-cover'
        });
    

Album Cover Tiles

Similar to album cover wall, but the tiles do not fill the entire space

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'album-cover-tiles'
        });
    

Album Cover Wall

Displays a 'wall' of all album covers in the playlist

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'album-cover-wall'
        });
    

Album Cover & List

Displays the album cover of the current song alongside a list of all songs in the playlist

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'album-cover-and-list'
        });
    

Info & Album Cover

The album cover for the current song and information about the current song

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'info-and-album-cover'
        });
    

Info

Display's the current song's info

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'info'
        });
    

List

A list of all songs in the playlist

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'list'
        });
    

Info & List

Displays the title and artist of the current song on the left and the entire playlist on the right.

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'info-and-list'
        });
    

Blank

This is a blank layout

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'blank'
        });
    

Album Cover & List (alternate)

Displays the current songs album cover on the right and the playlist on the left. Unlike the first album-cover-and-list layout, this layout fills the entire space.

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            layout:'album-cover-and-list-fill-space'
        });
    

You can download fully functional examples that work out of the box by purchasing a developer license. Download Examples Now