FancyBox 3 调整到 Window 和纵横比

Question

创建一个网站

如果您在我发布此问题的日期或几天后查看此问题（因为我不经常更新实时内容），您可以看到我的问题。单击左侧标有 "image" 的八张卡片中的一张，查看右侧弹出的信息。单击右侧的大图，可以看到 fancybox 弹出在所有内容之上。但是，图像会表现得一团糟。无论您 select 是什么图像，它通常都具有相对较高的分辨率，因此它会缩放到比屏幕大，但我希望它采用 window 的大小。它的宽高比也一直是错误的，除非我 select 全屏。如果我单击图像，它会按比例缩小，它采用图像容器 div 的宽高比，但容器几乎从来不是图像的实际尺寸。这就是为什么我首先拥有灯箱的原因。所以你可以看到整个事情。

以下是我实现 fancybox 的方式：

index.js

//this function is called on page load (like .ready())
function init_index() {
  ...

  $().fancybox({
    selector: '[data-fancybox="Featured"]',
    protect: true,
    autoSize: false,
    autoScale: false,
    autoDimensions: false
  });

  ...
}

首页-more.php

//this php file is loaded with some parameters to display the details on the right side
...
echo '  <div id="preview-media-container">';
echo '    <a class="fancybox-home" href="' . $ref_full . '" data-fancybox="Featured" data-type="image" data-caption="' . $trimmed . '" data-width="' . $dimensions['width'] . '" data-height="' . $dimensions['height'] . '">';
echo '      <img src="' . $ref_large . '" id="preview-media" />';
echo '    </a>';
echo '  </div>';
...

$dimensions['width'] 和 ['height'] 获取正在加载的特定图像的准确像素尺寸。请相信我，我已经测试过它并且有效。

我一直找不到任何关于我可以添加到 .fancybox() 对象的参数以及它们各自做什么的 fancybox 3 文档，所以这很复杂。除了您在此处看到的内容之外，我还尝试了一些不同的参数组合。

请记住，我这里的代码是本地的最新代码，实时代码有点不同，但奇怪的大小调整行为在实时站点上是相似的。我只给你 link 来帮助说明问题，而不是作为分析代码的来源。

我知道在我最新的本地代码中，fancybox 实例正在获取我的参数，因为我的设置禁用了右键单击 'protect: true'。

有人知道这里的问题是什么吗？

Answer 1

将 jQuery 更新到最新版本或至少更新到 v3.2.0

FancyBox 3 调整到 Window 和纵横比

FancyBox 3 Resizing to Window and Aspect Ratio

php

jquery

image

fancybox-3