Question

I am making a photo gallery script that involves displaying an image in a fixed width/height box. Now I want that image to display in its complete size. I mean, if the box is 700x300 px, the image should not resize to 700x300 but should display at its own full resolution. Also if possible, can I somehow make it drag around in the box so that it can be viewed completely?

Any help would be appreciated.

Answer 1

To make a draggable pane you need two elements, an outer div to act as a container, and an inner div to act as a ‘canvas’. The outer container needs to have its style set to overflow: hidden.

<div id="drag-container">
    <div id="drag-canvas"><img></div>
</div>

Next you need to make your inner canvas draggable. On mouseDown on the inner, call a function that sets a variable dragging = true. On mouseUp call a function that sets it to false. You’ll want to also store the mouse position on mouseDown and subtract the top and left position of the inner div so you can use that as an offset.

Then on mouseMove have the inner canvas’ top and left position set based on the mouse position. Don’t forget to add the offset so that the inner canvas drags from the point which you grabbed it at, otherwise the top left corner of the div will snap to the mouse position.

There are also several libraries, like JQuery UI that has a “draggable” method you can apply to a div directly, simplifying this process. The real key is to have the outer container set with a hidden overflow.