1

I want to preface by saying that my fundamentals of javascript are exceedingly poor. This is basically the first complex problem I've tried to solve, so if my issue here is glaring syntactical ignorance, I will not be surprised, but please be gentle.

So I'm using Imagemapster to do some hover effects in an imagemap. I also want a click in the various regions of the imagemap to open a popup, and I'm trying to do this with Fancybox-2 after giving up with Highslide.

I'm aware that normally Imagemapster inhibits the action of clicking on region from utlizing it as a link and that to disable this you need to manually insert something to the effect of:

image.mapster({
    fillOpacity: 0.0,
    isSelectable: true,
    singleSelect: true,
    mapKey: 'data-name',
    showToolTip: true,
    onClick: go
});

And I have seen code snippets of people using this for condtionals like:

function go (data) {
    if (this.href && this.href !== '#') {
        window.open(this.href);
    }
}

So through a process of breaking this in meaningful ways I've been trying to insert the call for fancybox into this "go" function, thinking perhaps this is the key to my problem. Currently however, none of my breaking has yielded much insight, and like I said, I don't really know enough about javascript to understand where my problem lies.

Here's my code currently:

(implicit are all the includes for jquery, fancybox, and imagemapster)

    <script>
$(document).ready(function () {
    $('#leoweb').mapster({
        singleSelect: true,
        render_highlight: {altImage: 'img/open.jpg'},
        mapKey:'hex',
        fill: true, 
        altImage: 'img/open.jpg',
        fillOpacity : 1,
        onClick: go
    }); 
});

function go (data) {
    $(".fancybox").fancybox();
};
</script>

    <map name="leoweb" id="leoweb">
    <area hex="1" class="fancybox" rel="image" title="hex" href="img/hex1.png" shape="poly" coords=" 463,73, 363,74, 305,160, 363,258, 462,255, 513,168, 465,76" />
    <area hex="2" href="#" shape="poly" coords=" 579,196, 521,292, 578,384, 675,388, 733,294, 683,200, 585,198" />
    <area hex="3" href="#" shape="poly" coords=" 243,202, 138,202, 86,293, 133,379, 245,382, 295,293, 251,206, 245,206" />
    <area hex="4" href="#" shape="poly" coords=" 353,330, 304,419, 361,513, 461,508, 513,413, 461,324, 354,328" />
    <area hex="5" href="#" shape="poly" coords=" 229,450, 142,451, 83,542, 133,638, 239,636, 296,538, 245,452, 239,450, 235,450, 233,450" />
    <area hex="6" href="#" shape="poly" coords=" 453,575, 355,574, 303,664, 351,764, 460,765, 515,672, 459,577, 457,576" />
    <area hex="7" href="#" shape="poly" coords=" 573,453, 521,550, 574,638, 681,638, 737,550, 685,450, 577,452" />
</map>

That one class="fancybox" business is my test region, the intent being that when I click on that region the image designated by the href opens in a fancybox popup.

If I omit everything from onClick on in the javascript, Imagemapster works fine. Currently, imagemapster does not work and the link functions, but just opens the image as if it were a regular link, no popup.

Any clues?

neaumusic
  • 10,027
  • 9
  • 55
  • 83
ornithology
  • 31
  • 3
  • in your go function, try console.log to see if the function is getting invoked. are you sure that fancybox() is a valid method to call on a collection of jquery wrapped elements? you're using `.fancybox` which is a class selector, so it should return an array of elements, try to log that as well – neaumusic Apr 27 '16 at 02:44
  • one thing i noticed is that your ready() function wasn't closed, that's probably what your problem is, but it would have shown that in the dev console (CMD+Shift+J or Ctrl if windows) – neaumusic Apr 27 '16 at 02:49
  • I also realized I may still need to include a "return false" to disable imagemapster's onclick situation. I appreciate your reply @neaumusic , but I'm not exactly sure how to read the output of console.log My code now: – ornithology Apr 27 '16 at 02:51
  • – ornithology Apr 27 '16 at 02:52
  • Is there a way to include code in a comment that's not so messy? – ornithology Apr 27 '16 at 02:52
  • Ah, this dev console business. I am currently editing and uploading and testing. Not in any sort of IDE – ornithology Apr 27 '16 at 02:54

0 Answers0