I need to create an interface for building photo galleries. I've got a good idea of how I want the UI to work, and I'm looking for input regarding existing scripts I could use, jquery plugins, general advice, etc..
The UI will consist of a narrow column on the left that will contain small thumbnails of all the users images. The rest of the page will be a grid of squares. The user will be able to drag a thumbnail from the left column onto one of the large squares in the main grid.
When a user drags a thumbnail on to one of the squares the image will load in the square. I'll detect the image size and make sure it fills the square completely, with the rest of the image not visible. The user should then be able to click/hold the image and move it around to control what section of the image is visible within the square (and which part is cropped out).
Is it possible to only display a section of an image like this. I'm thinking I can use the jquery draggable plugin, but I'm not sure how I'd make it so that only the part of the image overlapping the square is visible. Would I just use overflow hidden or is there a better way, possibly a jquery plugin that has this functionality built it?