Documentation

Options

You can customize the bahavior of boulevard by passing in options to the constructor

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

    

The full list of options for Boulevard

Option Description Default Valid values
autoPlay Determines whether music should automatically start playing when the player loads. false Boolean (true, false)
overlayOpacity This is specific to the 'overlay' and 'overlaySimple' styleTypes and determines the opacity of the overlay .6 Decimal. Any value between 0 and 1
overlayColor This is specific to the 'overlay' and 'overlaySimple' styleTypes and determines the color of the overlay 'dominant' The string 'dominant' or a string containing an rgb color i.e. 'rgb(102, 102, 102)'. If you're using a gradient overlay you can pass in an array with two color strings i.e.['rgb(102, 102, 102)', 'rgb(0, 0, 0, )']
gradientType The type of gradient vertical 'vertical'
'horizontal'
'directional'
'radial'
gradientDegrees This is specifically for gradientType = 'directional' and determines the direction of the gradient '80deg' A string indicated the degrees i.e. '45deg' or '120deg'
styleType This determines the background style. 'blur' 'blur'
'blur-player'
'dominant-color'
'overlay'
'overlay-simple'
'image'
'solid-blue'
'solid-blue'
'solid-orange'
'solid-green'
'solid-purple'
'solid-pink'
'solid-blue2'
'solid-white'
'solid-white2'
'solid-dark'
layout This sets the layout for the player. 'album-covers' 'album-covers'
'single-album-cover'
'album-cover-wall'
'album-cover-and-list'
'info-and-album-cover'
'info'
smallScreenLayout The layout to display when the container is less than the size set in smallScreenSize 'single-album-cover' 'album-covers'
'single-album-cover'
'album-cover-wall'
'album-cover-and-list'
'info-and-album-cover'
'info'
autoLoadDependencies Determines whether to auto load dependencies true Boolean (true/false)
backgroundImageSource Determines which attribute in the playlist item the background should be loaded from 'cover' 'cover'
'image'
pluginPath The path to the plugin files relative to the current document.
smallScreenSize The width in pixels that will trigger the smallScreenLayout 600 integer
imageEffects The effects to apply to the image when the styleType is set to Image false a pipe delimited list of filters from Caman.js
groupAlbumCoversInMiddle Specifically for the album-covers layout, this option will determine whether the album covers should be grouped in the middle or use all of the horizonal space true Boolean(true/false)
additionalLayoutConfigs An array of additional layout and background configurations false An array of objects. Each object represents on layout configuration.
    
    [
        {layout:'info', styleType:'blur'},
        {layout:'list', styleType:'solid-blue'}
    ]
    
jPlayer Allows you to pass in jPlayer options. {} Any valid jPlayer option
You can download fully functional examples that work out of the box by purchasing a developer license. Download Examples Now