Question

我无法让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，这是我使用标准$("a.fancybox").fancybox();调用fancybox插件的地方。

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

谢谢，肖恩

Answer 1

你能试试吗

<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"/>

Answer 2

删除孤儿：

<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>

Answer 3

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

该属性的有效选项应为image，iframe，ajax，html或inline。

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

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

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

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

BTW，你遇到的另一个问题是你的z-index标题（#header）比fancybox z-index（默认值大约是8010）更高（9998）所以我建议您降低z-index的{{1}}，否则fancybox关闭按钮将放在其后面。

Saludos a la tierra del buencafé。

Fancybox中没有显示图像

3 个答案: