我的FancyBox将无法运行...使用带图像映射的单个图像

时间:2013-01-28 17:34:49

标签: javascript fancybox

我正在尝试在图像上使用FancyBox,分为4个图像映射。我发现这篇文章:Using Fancybox with Image map,并重复使用的资源和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>

See it here.

上面有一个关于jsfiddle的例子。

3 个答案:

答案 0 :(得分:1)

你还没有包含jQuery。要在你的小提琴中做,请在right side of the page查看你的内容。要在您的真实页面上查看here,最简单的方法是将jQuery与CDN一起使用

它似乎只适用于jQuery 1.8.3及更低版本(我尝试了jsFiddle中提供的默认版本)。

您尚未关闭图片代码。

答案 1 :(得分:0)

如果您只想打开fancybox FROM 图片地图(此处也回答https://stackoverflow.com/a/11418310/1055987),那么您只需要将area标记绑定到fancybox, :

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

...如果area标记没有任何类,或者:

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

...假设area代码有class="fancybox"

请参阅 JSFIDDLE ....

关于您使用此链接链接到jQuery的fiddlehttp://ajax.googleapis.com/ajax/libs/jquery/1.3.4/jquery.min.js但是返回404错误。实际上似乎jQuery的v1.3.4从未存在过;)...你可以检查http://code.jquery.com/以获取以前版本的jQuery。

答案 2 :(得分:0)

对我来说,使用完整的URL路径时不会加载脚本(即以http://开头)

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