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:
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