This is a new version of the Fancybox 1.x (http://fancybox.net/) code base which adds a few similar features in Fancybox 2.x.
It implements the following:
- Adds an
isOpen()
function to Fancybox that functions like the Fancybox v2isOpen
property. - Adds support for beforeClose, afterClose and afterShow callbacks from Fancybox v2.
If you are looking to downgrade a KRAD-related application from Fancybox 2 to this version, you will also need to be sure to look at the following:
- The HTML is fairly different between these versions. Specifically,
Fancybox 1 uses "id" instead of "class" on the HTML elements. You will
also probably want to do the following if you have coded against the
CSS class names from Fancybox 2:
- Replace any references to
.fancybox-skin
with#fancybox-outer
- Replace any references to
.fancybox-wrap
with#fancybox-wrap
- Replace any references to
.fancybox-frame
with#fancybox-frame
- Replace any references to
.fancybox-inner
with#fancybox-content
- Replace any references to
- Fancybox 1 works best with "content-box" as the box sizing model. If
your application sets CSS
box-sizing
to "border-box" by default (which will be the case if using Bootstrap) then you need to change the fancybox using a snippet as follows:#fancybox-wrap { box-sizing: content-box; }
- If you are opening the fancybox manually in your code, then you will want to look at the options on both fancybox 1 and fancybox 2 and change them as needed.
For example, in KRAD internally, Fancybox 2 was initialized like:
{
fitToView: true,
openEffect: 'fade',
closeEffect: 'fade',
openSpeed: 200,
closeSpeed: 200,
minHeight: 10,
helpers: {
overlay: {
css: {
cursor: 'arrow'
},
closeClick: false
}
}
}
With Fancybox 1 the following is roughly equivalent:
{
autoScale: true,
transitionIn: 'fade',
transitionOut: 'fade',
speedIn: 200,
speedOut: 200,
hideOnContentClick: false,
padding: 0
}
Further documentation on the API for Fancybox 1 can be found at:
And futher documentation on the API for Fancybox 2 can be found at: