php - FancyBox 3 根据窗口和纵横比调整大小

Question

我正在创建一个网站 http://www.duss.sc.edu/nasca/

如果您在我发布此问题的当天或几天后查看此内容(因为我不经常更新实时内容)，您可以看到我的问题的说明。单击左侧八张标有“图像”的卡片之一，查看右侧弹出的信息。单击右侧的较大图像，然后看到在所有内容之上弹出的精美框。不过，图像的表现会完全错误。无论您选择什么图像，它通常都是相对较高的分辨率，因此它会缩放到大于屏幕，但我希望它采用窗口的大小。它的宽高比也始终是错误的，除非我选择全屏。如果我单击图像，它会缩小，它会采用图像的 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
  });

  ...
}

home-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 文档，因此事情很复杂。除了您在这里看到的之外，我还尝试了一些不同的参数组合。

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

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

有谁知道这是什么问题吗？

Answer 1

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