更新1：

Question

我想使用fancybox在我的投资组合中显示图像。但是我使用的是映射而不是单个图像，我不确定我是否正确编码。每当我点击图像时，它都会重定向到完全拒绝代码的图像。我之前使用过地图和灯箱，但我需要一种新的风格，因为我想彻底改造我的网站。

这是我的结果：http://antonybearpark.co.uk/whiteweb/type.html

在我在单独的画廊中进行个别项目但保持相同的页面之前，但是甚至没有让灯箱工作，我也无法弄清楚这一点。

我以前的设计是http://antonybearpark.co.uk/

请帮助，如果需要，我很乐意为人们提供更多信息。

由于

Answer 1

在您的javascript中，您仅针对父母。 $(".fancybox-button").fancybox({...});

使用容器，我已经做了更好的结果，但也使用'each'：

$(".hero img").each(function() {
 $(".hero a").fancybox({
 'transitionIn' : 'fade',
 'transitionOut' : 'fade'
...
...
});

我的所有图片共享一个共同的'rel'标记

<div class="hero">
    <a rel="client" href="#"><img src=...></a>
    <a rel="client" href="#"><img src=...></a>
    <a rel="client" href="#"><img src=...></a>
</div>

HTH

Answer 2

你有这个脚本：

$(".fancybox").fancybox({
 openEffect : 'none',
 closeEffect : 'none'
});

但是，您没有class="fancybox"的任何元素。这就是造成这个错误：

Error: $(".fancybox").fancybox is not a function
Source File: http://antonybearpark.co.uk/whiteweb/type.html
Line: 99

这打破了您的fancybox代码。尝试删除上面的脚本并调试你的js错误，这可能会解决你的问题。

更新1：

对于使用area map标记的图库，您应该为每个data-fancybox-group标记添加相同的area属性，而不是rel属性，因此代替此：

<area shape="poly" class="fancybox-button" rel="fancybox-button"  ...

使用它：

<area shape="poly" class="fancybox-button" data-fancybox-group="fancybox-button" ...

对于不同的图库，只需为data-fancybox-group属性使用不同的值。 e.g：

Gallery 01：

<area shape="poly" class="fancybox-button" data-fancybox-group="gallery01" ...
<area shape="poly" class="fancybox-button" data-fancybox-group="gallery01" ...

图库02（使用其他地图）

<area shape="poly" class="fancybox-button" data-fancybox-group="gallery02" ...
<area shape="poly" class="fancybox-button" data-fancybox-group="gallery02" ...

使用Fancybox但灯箱没有出现 - 只是重定向到我的图像

2 个答案:

更新1：