Question

我正在http://www.duss.sc.edu/nasca/

创建一个网站

如果您在我发布此问题的日期或几天之后（因为我不经常更新其中的内容）检查此问题，您可以看到我的问题。单击左侧标有＆＃34;图像＆＃34;的八张卡片之一，查看右侧弹出的信息。单击右侧较大的图像，看到fancybox弹出所有内容。但是，图像会表现得完全错误。无论你选择什么样的图像，它通常都是相对较高的分辨率，所以它会比屏幕大，但我希望它取得窗口的大小。除非我选择全屏，否则它的宽高比也一直是错误的。如果我单击图像以使其缩小，则需要图像的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 [＆＃39; width＆＃39;]和[＆＃39; height＆＃39;]可获得正在加载的特定图片的精确像素尺寸。请相信我已经对它进行过测试并确实有效。

我一直无法找到关于我可以添加到.fancybox（）对象的参数的任何fancybox 3文档以及它们各自执行的操作，因此这很复杂。除了你在这里看到的以外，我尝试了一些不同的论点组合。

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

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

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

Answer 1

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

FancyBox 3调整窗口和宽高比

1 个答案: