louv options

const instanceOfLouv = new Louv(configurationObject)

Louv configuration object has several options.

selector

• type: string
• default: '[data-louv]'
• specifies selector of html element containing sources that should become louv pictures

passive

• type: boolean
• default: false
• specifies if Louv instance after initialization should not automatically start loop method.

type

• type: string
• default: 'image' (other possible value: 'text')
• specifies what type of pictures should Louv instance produce.

scenarios

• type: array
• default: [initialScenario]
• array of scenarios that will be applied one after another unless some source for the picture has specified data-scenario-someId.

initialWidth

• type: number
• default: null
• specifies initial width of Louv instance container (the one with the selector specified in this config) if we laready know it. This helps reduce overall project loading time by making one reflow less.

initialHeight

• type: number
• default: null
• specifies initial height of Louv instance container (the one with the selector specified in this config) if we already know it. This helps reduce overall project loading time by making one reflow less.

preloadAllPictures

• type: boolean
• default: false
• specifies if Louv instance should preload src for all pictures. If not it will load only one and resolve its promiseTo.beReady promise

preloadPictureCss

• type: boolean
• default: true
• specifies if Louv instance should preload css for all morphs before start playing scenario of current picture. If not only first morph's css is loaded and as soon as first morph is completed next morph is calculated and loaded.

preloadAll

• type: boolean
• default: false
• specifies if Louv instance should preload all pictures and all morphs css before resolving its promiseTo.beReady promise

debug

• type: boolean
• default: false
• if true Louv will log into console main activities of this instance

globalWaitAfterPresent

• type: number
• default: null
• specifies if Louv instance should overwrite scenarios individual 'wait' amount

globalWaitAfterHide

• type: number
• default: null
• specifies if Louv instance should overwrite scenarios individual 'waitAfter' amount

loadingMessage

• type: boolean
• default: true
• specifies if Louv instance should create loading message styled in louv.scss

upstream

• type: boolean
• default: false
• Specifies if the direction of loup should be upstream that means that loop always chooses previous picture.

recalculateOnWindowChange

• type: boolean
• default: true
• specifies in this Louv instance should listen to window change and recalculate everything when it happens

width

• type: number
• default: 100
• specifies max width of the picture given as percentage of containers width

height

• type: number
• default: 100
• specifies max height of the picture given as percentage of containers height