我正在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
});
...
}
主页-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 实例正在获取我的参数，因为我的设置“保护：true”中禁用了右键单击。
有谁知道这里有什么问题？