Is it possible to combine Jcrop with jQuery contextMenu?

Question

I tried some straightforward implementation (e.g. mouse up, enable contextmenu) but it appears that it does not work that way. Could it be a zIndex issue?

$(function($) {
    $('#test').Jcrop({
        aspectRatio: 1,
        maxSize: [64, 64],
        onSelect: testFunc
    });
});

function testFunc() {
    console.log("onSelect - testFunc()");
    $.contextMenu({
        selector    : '#test',
        items       : {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"}
       }
    });
    console.log("contextMenu"); // Appears to be called but the contextmenu does not appear
}

Answer 1

Check out this fiddle

The jQuery contextMenu plugin creates a context menu that displays when you right click it. If you want to make it work with JCrop, you'd need to disable the default trigger (right click) and manually display the contextMenu from the JCrop onSelect.

$(function($) {
  $('#test').Jcrop({
    aspectRatio: 1,
    maxSize: [64, 64],
    onSelect: testFunc
  });

  $.contextMenu({
    selector    : '#test',
    trigger     : 'none', // disable right click trigger
    items       : {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"}
    }
  });
});

function testFunc() {
  // Manually display ContextMenu from registered selector
  $('#test').contextMenu();
}