Fancybox Links

Non-UI options (advanced)

There are a few things you can fine tune beyond the user interface. If you are not comfortable editing raw HTML code or writing (minimal) javascript code, ignore what follows next. Anyway, most likely you can figure out ways to do it using only the user interface.

HTML5 options (still advanced)

You can pass additional options as HTML5 data-* values in each link (they must be set in the link - the <a> tag -  that you want to modify). They are essentially the same options availables to the original Fancy Box jQuery plugin with only a few differences. These options will override those set in the Add/Edit dialog for that specific link. There is no UI option in concrete5 to add data attributes, so you will need to edit the HTML code.


Editing HTML code can be messy, but practice leads to mastery :)

Common options
KeyDefault valueDescription
data-fancyboxPadding 10 Space between FancyBox wrapper and content
data-fancyboxMargin 20 Space between viewport and FancyBox wrapper
data-fancyboxOpacity false When true, transparency of content is changed for elastic transitions
data-fancyboxModal false When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false'
data-fancyboxCyclic false When true, galleries will be cyclic, allowing you to keep pressing next/back.
data-fancyboxScrolling 'auto' Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no'
data-fancyboxWidth 560 Width
data-fancyboxHeight 340 Height
data-fancyboxAutoScale true If true, FancyBox is scaled to fit in viewport
data-fancyboxCenterOnScroll false When true, FancyBox is centered while scrolling page
data-fancyboxAjax { } Ajax options
Note: 'error' and 'success' will be overwritten by FancyBox
data-fancyboxSwf {wmode: 'transparent'} Params to put on the swf object
data-fancyboxHideOnOverlayClick true Toggle if clicking the overlay should close FancyBox
data-fancyboxHideOnContentClick false Toggle if clicking the content should close FancyBox
data-fancyboxOverlayShow true Toggle overlay
data-fancyboxOverlayOpacity 0.3 Opacity of the overlay (from 0 to 1)
data-fancyboxOverlayColor '#666' Color of the overlay
data-fancyboxTitleShow true Toggle title
data-fancyboxTitlePosition 'outside' The position of title. Can be set to 'float', 'outside', 'inside' or 'over'
data-fancyboxTitleFormat null Callback to customize title area. You can set any html - custom image counter or even custom navigation
data-fancyboxTransitionIn, data-fancyboxTransitionOut 'fade' The transition type. Can be set to 'elastic', 'fade' or 'none'

data-fancyboxSpeedIn, data-fancyboxSpeedOut

300 Speed of the fade and elastic transitions, in milliseconds
data-fancyboxChangeSpeed 300 Speed of resizing when changing gallery items, in milliseconds
data-fancyboxChangeFade 'fast' Speed of the content fading while changing gallery items
data-fancyboxEasingIn, data-fancyboxEasingOut 'swing' Easing used for elastic animations
data-fancyboxShowCloseButton true Toggle close button
data-fancyboxShowNavArrows true Toggle navigation arrows
data-fancyboxEnableEscapeButton true Toggle if pressing Esc button closes FancyBox
Less common options
data-fancyboxType Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline'
data-fancyboxHref Forces content source
data-fancyboxTitle Forces title
data-fancyboxContent Forces content (can be any html data)
data-fancyboxOrig Sets object whose position and dimensions will be used by 'elastic' transition

Even more non-UI options (even more advanced)

You can set additional options if you define a global javascript object like this anywhere in the page. The options passed to the addon will extend from that object. These settings have the lowest priority of all (get overriden by HTML5 and UI setings). You can set whatever option you want, as you would do in the original Fancybox, but it is specifically intended for adding your own javascript event handlers:

var = bbFancyBoxLinksDefaults = {
	ajax : {},
	swf : { wmode: 'transparent' },
	hideOnOverlayClick : true,
	hideOnContentClick : false,
	titleFormat : null,
	titleFromAlt : false,
	speedIn : 300,
	speedOut : 300,
	changeSpeed : 300,
	changeFade : 'fast',
	easingIn : 'swing',
	easingOut : 'swing',
	onStart : function(){},
	onCancel : function(){},
	onComplete : function(){},
	onCleanup : function(){},
	onClosed : function(){},
	onError : function(){}


Simply add that code to an HTML block somewhere in in your page and change or delete the values to suit your needs.

If you liked this add-on you might consider donating to support the development of this and other free add-ons: