add marker fired twice & incrementation not updated

[LeMee]

Hi; I'm using smarty templates and jquery mobile 1.4.3 along with jquery 2.1.1 . I have is a first problem already reported. The second problem with the plugin - but maybe I'm just doing wrong - is that the click(?) function is fired twice when I add a marker .. so the markers 4& 5, 6& 7, 8& 9, etc are overlapped. Plus, when I remove markers it seems that the incrementation still keep the previous numbering..so it's impossible to restart from number1

[waynegm]

Hi,

The click function firing twice is probably a function of having jquery mobile in the mix see this for instance. I don't have any experience with jquery mobile but suspect a jquery mobile specific version of imgNotes would be required.

There is a "clear" method that removes all notes and restarts the counter. If you delete individual notes the counter is not reset. While this seems like a bug it is really just a side effect of the default implementations of the onAdd and onEdit handlers. Let me see if I can come up with a custom onEdit handler that renumbers the notes when one is deleted.

[LeMee]

Hello, thanks for the reply. I've found your plugin a time after I have visited this jsbin http://jsbin.com/ojahel/5/edit

I have changed the html head with the very last versions of jquery and jquerymobile:

 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

Then I have change the javascript code to :

$(document) .on( "pagecontainerbeforeshow", function( event ) {
    var $wrapper = $('#wrapper');
        $('#wrapper img').click(function(e) {
            var $this = $(this);
            var offset = $this.offset();
            var pos = [];
            $pos = 0;
            pos.x=(e.pageX-offset.left)-($(".marker").width()*0.5);
            pos.y=(e.pageY-offset.top)-($(".marker").height());

            var pins = document.getElementsByClassName("marker");
            var out = pins.length;

            if (out == 0)
            $('<span>' + out + '</span>').addClass('marker').css("display", "none").appendTo($wrapper);
            else
            $('<span>' + out + '</span>').addClass('marker black').css({left: pos.x,top: pos.y}).appendTo($wrapper);    
        });

});

All this works like a charm. ..the only thing is..I want to use YOUR plugin :) not rewrite the whole stuff ..I'm not an expert so far.

Note: the jsbin is the original one I've found so you have to past the modified code above to see something. Thank your for your patience. pm

[waynegm]

I just pushed to master something for you to try. I've made a change to the underlying imgViewer plugin to address the multiple marker insert issue for jQuery Mobile. I've also cobbled together a new example "jquery_mobile.html (see the examples folder) which shows how you can renumber the notes after deleting. The example also shows which jQuery Mobile event should be used to activate the plugin so it displays properly from the get go.

I've only tested this on Linux Chrome and Firefox so far and as this is my first experience with jQuery Mobile it may not be the ultimate solution.

[LeMee]

double shot = fixed (windows) ! Thanks