1

I am attempting to migrate from v.2.1.7 to v3.5.7.

In v2.1.7, I was setting a maxWidth and maxHeight on my iframe types. The content in the iframe was always at 1280px by 960px. The lightbox would display on desktop, centered and with ample space around it. It was centered horizontally and vertically. It worked great.

I've read that with v3 of fancybox, I can set the width and height of the lightbox and I think that could work except I am seeing a width and height written inline on the fancybox-content div.

<div class="fancybox-content" style="height: 960px; display: inline-block; width: 1031px;">

When I crush the browser to get to a more mobile view, the height stays at 960px, but the width changes.

Here is what one of my buttons looks like:

<a data-fancybox class="fancybox-media" data-type="iframe" 
data-src="[permalink goes here]" href="javascript:;" 
data-group="project-items-5" data-title="title goes here">

My javascript settings looks like this.

jQuery('.fancybox-media').fancybox({  
  type:'iframe',
  toolbar: true,
  iframe: {
    css: {
      maxWidth: '1280px',
      maxHeight: '960px'
    }
  }
});

When I open a lightbox with these settings this is what I see on the .fancybox-content div:

<div class="fancybox-content" style="max-height: 960px; height: 960px; display: inline-block; width: 1051px;">

I see when I crush the browser the content inside of the lightbox scales down, but the lightbox itself does not. It stays at 960px height.

Any suggestions?

Robbiegod
  • 954
  • 4
  • 14
  • 44
  • And where is the issue? Since you have not given specific dimensions, the script resizes iframe element to match content dimensions by default. Since you have not given link to live page, it not possible to see what content dimensions are. – Janis Feb 25 '21 at 06:59
  • The issue is in mobile the fancybox is keeping the height at 960px even though the content inside of it is scaled down. So what I am seeing is a super tall white box with a scaled image in it. I want the lightbox to scale with the content. I think i had tried to set the width and height in the css parameter, but it did not seem to make any difference. – Robbiegod Feb 25 '21 at 14:37

0 Answers0