DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Configuration

To setup the fancybox, go to the template-view and select the fancybox-settings:

img-9

Reference

TypoScript options for fancybox 2:

Property

nextEffect

Data type

int+

Description

Padding: Space inside fancyBox around content

Default

Property

prevEffect

Data type

int+

Description

Margin: Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport

Default

Property

width

Data type

int+

Description

Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'

Default

Property

height

Data type

string

Description

Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'

Default

Property

minWidth

Data type

int+

Description

minWidth:Minimum width fancyBox should be allowed to resize to

Default

Property

minHeight

Data type

int+

Description

Minimum height fancyBox should be allowed to resize to

Default

Property

maxWidth

Data type

int+

Description

Maximum width fancyBox should be allowed to resize to

Default

Property

maxHeight

Data type

int+

Description

Maximum height fancyBox should be allowed to resize to

Default

Property

autoSize

Data type

options[true,false]

Description

If set to true, for 'inline', 'ajax' and 'html' type content width/height is auto determined. If no dimensions set this may give unexpected results

Default

Property

fitToView

Data type

options[true,false]

Description

If set to true, fancyBox is resized to fit inside viewport

Default

Property

aspectRatio

Data type

options[true,false]

Description

If set to true, resizing is constrained by the original aspect ratio (images always keep ratio)

Default

Property

topRatio

Data type

string

Description

Top space ratio for vertical centering. If set to 0.5 than vertical and bottom spece will be equal. If 0 - fancyBox will be at the viewport top

Default

Property

fixed

Data type

options[true,false]

Description

If set to true, fancyBox position will be changed to 'fixed' if it fits inside viewport

Default

Property

scrolling

Data type

options[auto, yes, no]

Description

Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes' or 'no'

Default

Property

wrapCSS

Data type

string

Description

Customizable CSS class for wrapping element (great for custom styling)

Default

Property

arrows

Data type

options[true,false]

Description

If set to true, navigation arrows will be displayed

Default

Property

closeBtn

Data type

options[true,false]

Description

If set to true, close button will be displayed

Default

Property

closeClick

Data type

options[true,false]

Description

If set to true, fancyBox will be closed when user clicks the content

Default

Property

nextClick

Data type

options[true,false]

Description

If set to true, will navigate to next gallery item when user clicks the content

Default

Property

mouseWheel

Data type

options[true,false]

Description

If set to true, you will be able to navigate gallery using the mouse wheel

Default

Property

loop

Data type

options[true,false]

Description

If set to true, enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa).

Default

Property

modal

Data type

options[true,false]

Description

If set to true, will disable navigation and closing

Default

Property

autoPlay

Data type

options[true,false]

Description

If set to true, slideshow will start after opening the first gallery item

Default

Property

playSpeed

Data type

int+

Description

Slideshow speed in milliseconds

Default

Property

index

Data type

int+

Description

Overrides group start index

Default

Property

type

Data type

string

Description

Overrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'

Default

Property

href

Data type

string

Description

Overrides content source link

Default

Property

content

Data type

string

Description

Overrides content to be displayed

Default

Property

title

Data type

string

Description

Overrides title content, accepts any HTML

Default

Property

openEffect

Data type

options[elastic,fade,none]

Description

Animation effect ('elastic', 'fade' or 'none') for each transition type

Default

Property

closeEffect

Data type

options[elastic,fade,none]

Description

Animation effect ('elastic', 'fade' or 'none') for each transition type

Default

Property

nextEffect

Data type

options[elastic,fade,none]

Description

Animation effect ('elastic', 'fade' or 'none') for each transition type

Default

Property

prevEffect

Data type

options[elastic,fade,none]

Description

Animation effect ('elastic', 'fade' or 'none') for each transition type

Default

Property

openSpeed

Data type

int+

Description

The time it takes (in ms, or "slow", "normal", "fast") to complete transition

Default

Property

closeSpeed

Data type

int+

Description

The time it takes (in ms, or "slow", "normal", "fast") to complete transition

Default

Property

nextSpeed

Data type

int+

Description

The time it takes (in ms, or "slow", "normal", "fast") to complete transition

Default

Property

prevSpeed

Data type

int+

Description

The time it takes (in ms, or "slow", "normal", "fast") to complete transition

Default

Property

openEasing

Data type

string

Description

Easing method for each transition type. You have numerous choices if easing plugin is included

Default

Property

closeEasing

Data type

string

Description

Easing method for each transition type. You have numerous choices if easing plugin is included

Default

Property

nextEasing

Data type

string

Description

Easing method for each transition type. You have numerous choices if easing plugin is included

Default

Property

prevEasing

Data type

string

Description

Easing method for each transition type. You have numerous choices if easing plugin is included

Default

Property

openOpacity

Data type

options[true,false]

Description

If set to true, transparency is changed for elastic transitions

Default

Property

closeOpacity

Data type

options[true,false]

Description

If set to true, transparency is changed for elastic transitions

Default

Property

openMethod

Data type

string

Description

Method from $.fancybox.transitions() that handles transition (you can add custom effects there)

Default

Property

closeMethod

Data type

string

Description

Method from $.fancybox.transitions() that handles transition (you can add custom effects there)

Default

Property

nextMethod

Data type

string

Description

Method from $.fancybox.transitions() that handles transition (you can add custom effects there)

Default

Property

prevMethod

Data type

string

Description

Method from $.fancybox.transitions() that handles transition (you can add custom effects there)

Default