我的花式盒子不会运行.将单个图像与图像映射一起使用

My FancyBox won't run...using a single image with image maps

本文关键字：图像 映射 一起 单个 盒子 运行 我的      更新时间：2023-09-26

我正在尝试在图像上使用FancyBox，分为4个图像映射。我找到了这篇文章：将 Fancybox 与图像映射一起使用，并复制了使用的资源和 js，但我的似乎不想运行......？请帮忙！

.HTML：

<img src="http://www.acquafibrausa.com/images/caps_top.png" usemap="#Map">
    <map name="Map" id="Map">
       <area shape="rect" coords="43,91,177,141" href="http://www.acquafibrausa.com/images/nutrition_lime.png"
class="fancybox" alt="Click to view Lime nutrition facts" rel="image" />
       <area shape="rect" coords="264,92,399,142" href="http://www.acquafibrausa.com/images/nutrition_orange.png"
class="fancybox" alt="Click to view Orange nutrition facts" rel="image"
/>
       <area shape="rect" coords="488,92,622,143" href="http://www.acquafibrausa.com/images/nutrition_strawberry.png"
class="fancybox" alt="Click to view Strawberry nutrition facts" rel="image"
/>
       <area shape="rect" coords="711,90,846,142" href="http://www.acquafibrausa.com/images/nutrition_peach.png"
class="fancybox" alt="Click to view Peach nutrition facts" rel="image"
/>
    </map>

JQUERY/头内容：

<link href="main_style.css" rel="stylesheet" type="text/css">
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
   $('map > area.fancybox').click(function(e) {
   e.preventDefault();
   var url = $(this).attr('href');
   var title = $(this).attr('title');
   var type = $(this).attr('rel');
   $.fancybox({
      'title': title,
      'titlePosition': 'inside',
      'href' : url,
      'type' : type
   });
});
</script>

在这里看到它。

上面

有一个关于jsfiddle的例子。

你还没有包括jQuery。要在小提琴中执行此操作，请查看页面右侧。要在真实页面上执行此操作，请查看此处，最简单的方法是将jQuery与CDN一起使用。

它似乎仅适用于jQuery 1.8.3及更低版本（我尝试了jsFiddle中可用的默认版本）。

而且您尚未关闭图片标签。

如果您只想从图像映射中打开 fancybox U（这里也有答案 https://stackoverflow.com/a/11418310/1055987），那么您只需要将 area 标签绑定到 fancybox，要么执行以下操作：

$("#Map area").fancybox();

。如果 area 标记没有任何类，或 ：

$(".fancybox").fancybox();

。假设area标签具有class="fancybox" .

见 JSFIDDLE ....

关于你的小提琴，你使用这个链接链接到jQuery：http://ajax.googleapis.com/ajax/libs/jquery/1.3.4/jquery.min.js 但这返回了一个404错误。实际上，似乎jQuery的v1.3.4从未存在过;)...您可以检查以前版本的 jQuery 的 http://code.jquery.com/。

对我来说

，使用完整的URL路径（即以http://开头）时不会加载脚本

尝试使用相对路径加载图像：href="images/image.jpg"

相关文章：