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

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

这是我的结果：

以前，我在不同的图库中也有单独的项目，但保持相同的页面，甚至连灯箱都没有工作，我也无法理解这一点

我以前的设计正在进行中

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

---

谢谢，在你的javascript中，你只针对父母。

$（“.fancybox按钮”）.fancybox（{…}）

我使用容器（如您所做）获得了更好的结果，但也使用了“每个”：

$(".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
您有以下脚本：

$(".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
标记的画廊，您应该向每个
area
标记添加相同的
data fancybox group
属性，而不是
rel
属性，因此：

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

画廊02（使用其他地图）

fancybox js文件不在您指定的位置：。。。。检查大多数js文件的路径，包括鼠标滚轮插件！！在这里：但是您的路径是/fancybox/source/jquery.fancybox.pack.js，因此正在从根目录中查找它，但实际上它位于“whiteweb”子目录下OK谢谢。它现在起作用了。但是箭头没有出现，所以你可以点击下一张图片，这是我最初想要的。是否可以让两个或多个单独的图库使用不同的图像，并使用箭头按钮在同一页面和同一图像地图上单击？有关箭头和图库问题，请参阅上面答案中的“我的更新”
<area shape="poly" class="fancybox-button" data-fancybox-group="fancybox-button" ...

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

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