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

Question

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.

In the browser console, does it sends you an error or warning? — Carlos Valenzuela, Jan 28 '13 at 17:42
nope, the images just open in a new page. The map just behaves like normal, as if I wasn't trying to run FancyBox. — amandabeau, Jan 28 '13 at 17:48
possible duplicate of [How to open fancybox using map link](http://stackoverflow.com/questions/11412483/how-to-open-fancybox-using-map-link) — JFK, Jan 28 '13 at 20:19

Punchlinern · Answer 1 · 2013-01-28T18:12:26.903

1

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.

edited Jan 28 '13 at 18:12

answered Jan 28 '13 at 17:59

Punchlinern

714
5
17
33

The image is from a fiddle from the post you referred to. – Punchlinern Jan 28 '13 at 18:01
Thanks!I've included 1.8.3 in the jsFiddle example as well as the real page. It works in jsFiddle now, but still doesn't want to run on my page...? – amandabeau Jan 28 '13 at 18:53
Also, what do you mean by I "haven't closed my image tag"? All my tags look complete to me, what am i missing? – amandabeau Jan 28 '13 at 18:54
You seem to have jQuery version 1.4.3. But the main error appears to be that it fails to load the fancybox js-file. If you open the page in Google Chrome and open the inspector (ctrl+shift+i WIN or cmd+alt+i MAC) and go to the Consol tab and reload the page. I get the following error: `GET` [file location] `404 (Not Found) `. Have you uploaded the script file to your server? And the img tag should be `` – Punchlinern Jan 28 '13 at 19:18
Ignore the *-symbols, I tried to make the slash bold. `` – Punchlinern Jan 28 '13 at 19:28
I noticed that you fixed the fancybox-link and that it still doesn't work. I also saw that you've included jQuery twice, once from your server, and once from Google's. Try removing one, and placing the second above the line where you load the fancybox-script. I'd also try a newer version of jQuery. – Punchlinern Jan 28 '13 at 20:39

score 0 · Answer 2 · edited May 23 '17 at 12:12

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.

score 0 · Answer 3 · edited Jul 20 '13 at 18:47

0

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"

edited Jul 20 '13 at 18:47

Can

8,502
48
57

answered Jul 20 '13 at 18:19

James Stevenson

1

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

3 Answers3