Jquery how to add pin to image and keep position SQL
How can I snap a picture and save the position of my contacts?
I found this plugin , but I don't know how to save the position of these pins.
The idea is similar to Google Map, where the user can place as many contacts as they like and store those positions in the database; the next time he logs in, he will see where he put his pin.
source to share
Try this - it's pretty simple but works well.
http://duncanheron.github.com/dropPin/
You will need to customize it for your needs, but the general idea of adding contact code coordinates to an image is.
source to share
You can get node 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 sent to save.php.
source to share
You can use jQuery mouse position to find out where you added the pin and shove those vars into your sql database.
$("#special").click(function(e){
$('#imgId').html(e.pageX +', '+ e.pageY);
});
The tricky part is getting jquery vars for php (Resources below) so your sql should look something 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 FROM FIRST COMMENT ON THIS TABLE:
You can simply add a new image when you click and style it along with it:
$("#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 div object must be set to position: relative and not sure if this will work, this is written without code checking, some changes might be required!
source to share