1

我无法让 fancybox 在我正在构建的网站上显示其相应的图像 http://www.nomadicdrift.com/test/kaniwa#events。这是我在 WordPress 平台上设置的自定义单页作品集主题。

如果您点击事件部分的链接，您将在类似位置的画廊中看到 1 个图形项目。我将此图像设置为fancybox 画廊，但是当您单击它时，它会打开fancybox 界面，但不会在框架中放置图像，即使它应该放置。所以这就是问题所在......图像没有出现在fancybox中，而我只看到了框架。

这是我正在显示的 html：

<figure>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
</a>
<figcaption>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg">   </a>
<h4>Fashion Show de Paris, France</h4>
</figcaption>
</figure>

我不会用我用来获取该输出的 PHP 让您感到厌烦，因为我认为问题出在其他地方。

***我也尝试在网站上建立一个简单的标准fancybox画廊，但它给了我同样的问题，让我相信问题比html标记更深。我还成功地将相同的标记用于另一个站点上的一个缩略图 fancybox 画廊。

我想这可能是由于我正在使用的 .js 文件中的一些冲突。我尝试一一卸载我所有的插件/插件（不是太多），但仍然有相同的结果。我在 functions.js 文件中有我所有的个人 javascript，这是我使用标准 .js 调用 fancybox 插件的地方$("a.fancybox").fancybox();。

我以前在其他网站上安装过这个插件，并广泛搜索了答案，所以非常感谢任何帮助。

谢谢，肖恩

4

3 回答 3

0

你能试一下吗

<figure>
   <a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
      <img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
   </a>
   <figcaption>
      <h4>Fashion Show de Paris, France</h4>
   </figcaption>
</figure>

应该只留下一个<a class="fancybox"/>

于 2012-09-27T02:39:52.023 回答
0

删除孤儿：

<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg">   </a>
于 2012-09-27T02:43:35.127 回答
0

好吧，您的代码对于花式框来说似乎在语义上是正确的，但事实并非如此。您遇到的问题是fancybox 使用该data-fancybox-type属性来确定type它应该打开哪些内容（在您的情况下是一个图片库）但是“法国巴黎时装秀”对fancybox 没有说什么，所以type内容是未知的或未定义，因此是空框。

该属性的有效选项应该是image、iframe、ajax或。htmlinline

也许您打算使用data-fancybox-group="gallery_name_here". 检查https://stackoverflow.com/a/9037826/1055987了解更多信息。

您可以尝试删除该data-fancybox-type属性（为 fancybox 保留）-或-将其重命名为

data-description="Fashion Show de Paris, France"

...供您自己使用，因此不会与fancybox冲突。

顺便说一句，您遇到的另一个问题是z-index您的标头 ( #header) 高于 (9998) 比 fancybox z-index（默认情况下约为 8010），所以我建议您降低z-index您的#header，否则将放置 fancybox 关闭按钮它的背后。

Saludos a la tierra del buen 咖啡馆。

于 2012-09-27T07:26:17.237 回答