CODEWITHSUNDEEP
javascriptfancybox
amandabeau
amandabeau

Reputation: 43

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

I'm trying to use FancyBox on an image, divided into 4 image maps. I found this post: Using Fancybox with Image map, and duplicated the resources used and js, but mine doesn't seem to want to run...? Please help!

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/head content:

<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.

There there's an above example on jsfiddle.

Upvotes: 0

Views: 1499

Answers (3)

James Stevenson
James Stevenson

Reputation: 1

For me, the script won't load when using the full URL path (i.e. starting with http://)

Try loading the image using a relative path: href="images/image.jpg"

Upvotes: 0

JFK
JFK

Reputation: 41143

If you just want to open fancybox FROM an image map (also answered here https://stackoverflow.com/a/11418310/1055987), then you just need to bind the area tag to fancybox, either doing :

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

... if the area tag has not any class, or :

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

... assuming that the area tag has class="fancybox".

See JSFIDDLE ....

Regarding your fiddle you were linking to jQuery using this link : http://ajax.googleapis.com/ajax/libs/jquery/1.3.4/jquery.min.js but that returns a 404 error. Actually it seems like a v1.3.4 of jQuery never existed ;) ... you can check http://code.jquery.com/ for previous versions of jQuery.

Upvotes: 0

Punchlinern
Punchlinern

Reputation: 754

You haven't included jQuery. To do it in your Fiddle, look at your at the right side of the page. To do it on your real page look here, the most simple way is Using jQuery with a CDN.

It appears only to work with jQuery 1.8.3 and below (I tried the default versions available in jsFiddle).

And you haven't closed your image tag.

Upvotes: 1

Related Questions