All the Captall options with examples.

All the options are displayed one by one with all the other options as default, unless it's necessary for the example.

animation, backgroundColor, caption, delay, delayHide, delayShow, easing, easingIn, easingOut, fadeOutAfter, fontColor, fontSize, height, intTime, left, opactiy, outTime, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, slideFrom, slideTo, textAlign, time , top, width

animation

Default: slide

• animation: 'fade'
• animation: 'float'
• animation: 'fixed'

• animation: 'slide'

backgroundColor

Default: white

• backgroundColor: '#00f'
• backgroundColor: 'rgb(255, 0, 0)'
• backgroundColor: 'rgba(255,0,0,0.5)'

caption

Default: empty
When set it overides the text in the alt attribute.

• caption: 'Hello there'

delay

Default: 0 millisecond

• delay: 0
• delay: 500
• delay: 1000

delayHide

Default: 0 millisecond

• delayHide: 0
• delayHide: 500
• delayHide: 1000

delayShow

Default: 0 millisecond

• delayShow: 0
• delayShow: 500
• delayShow: 1000

easing

Default: ''
For these examples there's an extra option : time: 500

• easing: 'easeInOutBack'
• easing: 'easeInQuint'
• easing: 'easeInOutElastic'

easingIn

Default: ''
For these examples there's an extra option : time: 500

• easingIn: 'easeInElastic'
• easingIn: 'easeInBounce'
• easingIn: 'easeInOutBack'

easingOut

Default: ''
For these examples there's an extra option : time: 500

• easingOut: 'easeOutElastic'
• easingOut: 'easeOutBounce'
• easingOut: 'easeOutBack'

fadeOutAfter

Default: ''
For these examples there's an extra option : animation: 'fixed'

• fadeOutAfter: ''
• fadeOutAfter: 500
• fadeOutAfter: 1000

fontColor

Default: black

• fontColor: '#00f'
• fontColor: 'rgb(255, 0, 0)'
• fontColor: 'rgba(255,0,0,0.5)'

fontSize

Default: 16px

• fontSize: '24px'
• fontSize: '0.5em'
• fontSize: '24pt'

height

Default: 30 pixels

• height: 50
• height: 'half'
• height: 'full'















• height: '30%'
• height: '2/3'
• height: '100%'

inTime

Default: 200 milliseconds

• inTime: 0
• inTime: 800
• inTime: 2000

left

Default: 0 pixels
Can only be used with animation: 'fade' or animation: 'fixed', for animation: 'slide' use slideTo

• left: 50
• left: 'center'
• left: 260

opacity

Default: .7

• opacity: 0
• opacity: 0.5
• opacity: 1

outTime

Default: 200 milliseconds

• outTime: 0
• outTime: 800
• outTime: 2000

padding

Default: 0 pixels

• padding: [10]
• padding: [10, 5]
• padding: [10, 0, 5, 20]

paddingTop

Default: 0 pixels

• paddingTop: 10
• paddingTop: 30
• paddingTop: 50

paddingRight

Default: 0 pixels
For these examples there's an extra option : textAlign: 'right'

• paddingRight: 10
• paddingRight: 30
• paddingRight: 200

paddingBottom

Default: 0 pixels

• paddingBottom: 10
• paddingBottom: 30
• paddingBottom: 200

paddingLeft

Default: 0 pixels

• paddingLeft: 10
• paddingLeft: 30
• paddingLeft: 200

slideFrom

Default: topleft
For these examples there's an extra option : width: 200

• slideFrom: 'topleft'
• slideFrom: 'topcenter'
• slideFrom: 'topright'















• slideFrom: 'righttop'
• slideFrom: 'rightcenter'
• slideFrom: 'rightbottom'















• slideFrom: 'bottomleft'
• slideFrom: 'bottomcenter'
• slideFrom: 'bottomright'















• slideFrom: 'lefttop'
• slideFrom: 'leftcenter'
• slideFrom: 'leftbottom'

slideTo

Default: bottomleft

• slideTo: 'top'
• slideTo: 'center'
• slideTo: 'bottom'

For these examples there are 2 extra options : width: 200 and slideFrom: 'leftcenter'

• slideTo: 'left'
• slideTo: 'center'
• slideTo: 'right'

textAlign

Default: left

• textAlign: 'left'
• textAlign: 'center'
• textAlign: 'right

time

Default: 200 millisecond

• time: 0
• time: 800
• time: 2000

top

Default: 0 pixels
Can only be used with animation: 'fade' or animation: 'fixed', for animation: 'slide' use slideTo

• top: 10
• top: 'center'
• top: 150

width

Default: full

• width: 50
• width: 'half'
• width: 'full'















• width: '30%'
• width: '2/3'
• width: '100%'