Have Geek Brain

How do I display an image in a fixed div to create a scrollable image panel?

I am making a photo gallery script that involves displaying an image in a fixed width / height box. now I want this image to be displayed in full size. I mean, if the field is 700x300 pixels, the image shouldn't resize to 700x300, but should be displayed at full resolution. also if possible can I somehow drag it into the drawer so that it can be fully displayed?

any help would be appreciated.

+1


a source to share


1 answer


To create a draggable panel you need two elements, the outer div as the container and the inner div as the "canvas". The outer container should have its own style overflow: hidden

.

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

Then you need to make your inner canvas dragable. On mouseDown

the inside, call the function that sets the variable dragging = true

. On mouseUp

call the function that sets it to false

. You will also want to keep the mouse position on mouseDown

and subtract the top and left positions of the inner div so you can use that as an offset.



It mouseMove

will then set the top and left position of the inner canvas based on the position of the mouse. Remember to add an offset so that the inner canvas will move from the point you grabbed it, otherwise the top-left corner of the div will snap to the position of the mouse.

There are also several libraries, such as jQuery UI , which has a drag and drop method that can be applied to the div directly, simplifying the process.The real key is to have the outer container set with an overflow hidden.

+2


a source






More articles:


All Articles