I am building an image viewer/annotation tool using jQuery and Interface (sliders and draggables).
The basic functions I've gotten working so far are: * A large image loads into a div container, with only a small masked area visible * The large image can be dragged around, much like Google Maps * The large image can be scaled up and down with a slider control * An annotation marker (image) can be dropped on top of the image * The marker can also be dragged independently, AND follows the larger image as it's dragged This viewer is almost completed, with the exception of one function: When the large image is scaled up and down, I cannot find the right "formula" to keep the marker on top of it in the same position. No matter what I try, it either scales too fast or too slow. At first my logic was: If the large image scales down 10%, why can't I just reduce my x and y coordinates (or rather the 'top' and 'left' css attributes) on the marker 10%? Doesn't seem to work. Maybe that theory is correct and my math is just wrong. (BTW, the marker image is a 20x20 square). Rather than running this into the ground over several hours on my own, I thought I'd see if anyone here had any insights. Thanks in advance!
