fancy__content width and height are not being set when fancybox iframe opens

[dustinKicksite]

Hey all,

I am running into issues with getting fancybox to display the selected image correctly when the iframe opens.

After following the "getting started" section of the documentation, I was able to successfully able to get it installed using npm. I thought everything was working correctly, but when I click an image from the gallery and it opens in the fancybox iframe the "fancy__content" div container is not receiving any height or width.

Judging by the JSfiddle examples I looked through supplied by the documentation, it seems like those two values are supposed to be dynamically set. Does anyone have any ideas why it would be failing to do so?

HTML

<div> //
<a 
  href="<?php echo $image['url']; ?>" 
  class="fancybox-gallery-link" 
  data-fancybox="gallery"
>
  <div class="gallery-item">
    <img 
      src="<?php echo $image['url']; ?>" 
      alt="<?php echo $image_alt?>"
      style="<?php echo ! empty( $advanced_image_controls ) ? " --advanced-image-controls: " . esc_attr( $image_styles ) . ";'" : NULL; ?>"
    >
  </div>
</a>
</div>

JS File

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

Fancybox.bind("[data-fancybox]", {
  // Your custom options
});

Output that I see in the browser when clicking on an image from the gallery

<div 
  class="fancybox__content" 
  style="width: 0px; height: 0px; transform: matrix(1, 0, 0, 1, 0, 0);"
>
  <img 
   src="https://strength-20.local/wp-content/uploads/2022/11/Girl-sportsman-muay-thai-boxer-fighting-in-gloves-in-gym.jpg" 
    alt="Image 1 of 9" 
    draggable="false" 
    class="fancybox-image">
</div>

Thanks for any help you may be able to provide.

[fancyapps]

Sorry, but it is not possible to help you without seeing a live page/demo. As you can see in any other demo, it works well. Maybe there is an CSS conflict on your page, but, as you can understand, I do not know that without seeing your page.

[dustinKicksite]

Currently, it's on a local dev environment, so I'll have to work on getting a live version up an running.

I thought that it was maybe a css conflict as well, but the width and height are not being overridden by any css. I actually have to use "width: 1000px ! important" to override the 0px that is set inline.

[fancyapps]

I am sorry, but you just have to give something (your code snippets do not give any clue), otherwise I can not help you. I am sure it is something trivial.

[dustinKicksite]

No problem, I understand. Here is a link to a staging site with the gallery on it https://agility2.staging.mysites.io/gallery-test/.

[fancyapps]

You have mixed CSS from different versions of Fancybox. Remove this file - https://agility2.staging.mysites.io/wp-content/themes/Agility-Theme/dist/src/scss/config/_fancybox.scss

[dustinKicksite]

Ah thank you! You were right that it was something very simple. I had removed the old v3 fancybox js file, but didn't bother checking the scss directory for a fancybox conflict.

Thanks again!