1

我在最近推出的网站上遇到了 fancybox 2 的问题。

我使用我的页面上的链接在花式灯箱中打开 Galleria (galleria.io) 画廊和 PDF 文件。对于照片画廊（画廊），我在fancybox iframe 中加载了另一个网页，并且我正在定义明确的缩略图图像，因此不必立即加载所有全尺寸图片。对于 PDF 内容，我直接在 iframe 中加载 PDF 文件。

但是，第一次单击链接时，通常不会出现 iframe（永久加载动画）。关闭花式框并再次单击链接可以很好地加载内容。Galleria 和 PDF 内容都会发生这种情况。

我主要在 FF 中开发和测试了该网站，但似乎问题也出现在 IE 中。

在互联网上搜索答案后，我发现的最接近的问题是 stackoverflow 上的以下问题：

/questions/4710023/jquery-fancybox-working-but-only-when-you-click-this-image-twice

（尝试使用此处发布的解决方案交换术语，但在 iframe 内导致 404）

/questions/9779250/fancybox-2-requires-two-click

（信息不足）

/questions/14819642/fancybox-stuck-loading-iframe-in-ie

（指的是 IE，但禁用预加载听起来很有希望，我正要试一试）

我是一个家庭建设者，而不是一个代码建设者，所以我确信我在构建我的网站的过程中做错了什么。我将不胜感激提供的任何帮助！谢谢！

示例链接：

（在开发中）画廊页面： http: //www.sonahomes.com/gallery/

（实时）主页： http: //www.sonahomes.com [在主页的页脚上方有“精选列表”，其中包含指向 PDF 和照片画廊的链接……最右边的列表加载了一个包含 19 个相片]

代码：

在 iframe 中打开 PDF 的链接：

<a href="...pdf file..." class="various">
  <p><img src="...icon..." class="icon" />PDF Flyer</p>
</a>

在 iframe 中打开 Galleria 画廊的链接：

<a href="...link to page with galleria..." class="various">
  <img src="...small image..." class="thumb1" />
  <div>
    <p><img src="...icon..." class="icon" />19 Photos</p>
  </a>
  </div>

（我知道上面画廊链接中的附加 div 并不完全正确，但我认为它与问题无关，因为同样的问题发生在上面链接的画廊页面上，该页面只有文本链接）

使用 fancybox 在页面上初始化：

<body>
<script type="text/javascript">
$(document).ready(function() {
  $(".various").fancybox({
    autodimensions : false,
    autoSize : false,
    fitToView : false,
    type : 'iframe',
    });
});
</script>
4

0 回答 0