jquery how to add pin to image and save the position to SQL

Question

How can I pin an image, and save the position of my pins?

I found this plugin, but I don\'t know how to save the position of these pins.

The idea is like Google

Answer 1

Try this - its pretty simple but works well.

http://duncanheron.github.com/dropPin/

You will need to customise it for your needs, but the general idea for adding pin co-ordinates to an image is there.

Answer 2

You can use the jQuery mouse position to know where you've added a pin and shove these vars into your sql database.

$("#special").click(function(e){
      $('#imgId').html(e.pageX +', '+ e.pageY);
   }); 

The tricky part is getting the jquery vars to php (Resources below) so you're sql should look something similar like this:

user_id - pin_id - positionX - positionY

Resources:

Mouse position: http://docs.jquery.com/Tutorials:Mouse_Position

Passing jquery to php: http://www.sitepoint.com/forums/showthread.php?650046-Passing-Jquery-Var-To-Php-Mysql-Query

Hope this helps you!

EDIT DUE TO FIRST COMMENT ON THIS POST:

You can simply add a new image when you click and give it a style along with it just like this:

$("#imageDiv").click(function (e) {
     $(this).addImage($(this), e.pageX, e.pageY);
});


function addImage(object, xPos, yPos){
     object.append("<img src='markerImg.png' style='position:absolute; left:"+xPos+";   top:"+yPos";' />");     
}

PS: your object div should be set to position: relative & not sure if this will work, this is written without testing the code, some changes may be needed!

Answer 3

You can get nodes information like this:

function getNodes(){
    var nodes = [];
    $('img', $('#container')).each(function(){
        nodes.push([$(this).css('top'), $(this).css('left')]);
    });

    $.post('save.php', {nodes: nodes}, function(data){}, 'json');
}

Then the position of the nodes will be post to save.php.