我正在尝试在图像上使用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>
上面有一个关于jsfiddle的例子。
答案 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的fiddle:http://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"