How to apply CSS in version 4 of fancybox?

[skmusharaf786]

Hi Team,

Our application was using 2.1.5 version of fancybox and now we are upgrading the library to latest version v4.0.26 of fancybox.

As new version of fancybox is not being handled with jquery we are facing issues with below code.

parent.$.fancybox.skin.height(570);
parent.$.fancybox.inner.height(570);
parent.$.fancybox.wrap.css('top', 84 + 'px');

Could you please help with equivalent code for above code in latest version v4.0.26 of fancybox

Thankyou

[fancyapps]

Hi,

The way you set the dimensions depends on the type of content. For HTML content, you simply use CSS to style your element, example:

<div id="dialog-content" style="display:none;max-height:570px;">...</div>

HTML content is vertically centered using CSS. Since CSS Flexbox has issues with scrollable content, Fancybox uses pseudo elements and sets margins to archive vertical centering. You can control it like this:

.fancybox__slide:before {
    margin: 0 0 84px 0;
}