jQuery image scroll view with touch and marker support

Question

I have a large image which should be viewed at 100% zoom and touch scrollable by the user on a mobile device (a scrollable view of 100% width of the device). When they find the right position in the large image they should be able to place a marker at that position and than save it (So the X and Y point should be retrievable at submit of the form).

What Library is best to use for this? I've searched the web for hours now and I cannot find a solution to my problem. I did find how to make a touch scrollable image, and how to add a marker to an image but getting those together isn't as easy as I hoped.

Is there any library that can do these tasks both?

Answer 1

I recently had a similar project. I am not sure how well this works with the mobile scrollable stuff you have going on, but the marking math would probably be similar. I did not find a suitable library either and ended up writing my own. I don't have that code, but it is relatively straight forward.

There is not really much magic to it. Basically, you want to find the click coordinates (event.pageX and event.pageY), adjust for the image's .offset().left and offset().top values, and then compare them to the image's height and width to calculate the coordinates as a percentage against the image.

The ratio x/y values become important if you ever want to resize the image and have the marks remain in place. You just want to make sure the image in inside a container with relative positioning and you can recalculate explicit x/y values as needed.

Something like:

var marks = [];
var $img = $("img");

$img.on("click",function(e){

    marks.push({ 
        x: (e.pageX - $img.offset().left) / $img.width(),
        y: (e.pageY - $img.offset().top) / $img.width(),
        id: marks.length
    });

    drawMarks();  
});

function drawMarks(){

    var mCount = marks.length;

    $(".mark").remove();

    while(mCount--){

        var mark = marks[mCount];

        $("<div class='mark' >")
            .data("id", mark.id)
            .appendTo('.holder')
            .css("top", mark.y * $img.width() + "px")
            .css("left", mark.x * $img.width() + "px");  
    }
}

http://jsfiddle.net/K6jwn/