Dragging the privew of an image in it's view space

Started by GigaWatt, March 22, 2018, 12:44:26 AM

Previous topic - Next topic

GigaWatt

I posted about this in the SMF 2.0.x support forum (link), but I haven't found what I was looking for. I'm not a PHP coder, but I guess it would mean a complete rewrite of how the image preview code handles the images ???... I might be wrong though.

Here is what I was looking for.

If you set a maximum width of embedded images in posts on your forum and you click on the image, the full view (1x zoom) of the image shows up, like so.



It would be nice if you could drag the image left or right with the cursor (hand), not just with the scroll bars (like in an image viewing app ;)).
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

GigaWatt

Quote from: GigaWatt on March 22, 2018, 12:44:26 AM
It would be nice if you could drag the image left or right with the cursor (hand), not just with the scroll bars (like in an image viewing app ;)).

Any chance somebody could guide me on how to achieve this? I'll be a really good pupil, I promise :).
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

Arantor

Needs a bunch of JavaScript to intercept the usual behaviours, because drag on a usual browser means something quite different, which is why the scroll bars are as they are.

The actual PHP and HTML would be almost identical, just adding another div or two, but the JS... offhand I have no idea how to do it... I see a bunch of "drag to scroll" scripts out there, but they all seem to handle the page, not an image that consumes most of its container's size.

GigaWatt

Yeah, I know, I did some reading after I posted this request and it seems you're right, the drag function defaults to something completely different in a browser :S.

How about this, the scroll bars are visible, no change on that part, but you can drag the image left or right like you would with the scroll bars? Can this be done in rather simple manner?
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

Arantor

Not really, it's exactly the same problem whether the scrollbars are visible or not; dragging initiates a bunch of stuff irrelevant to scrolling around the page, and while there are definitely scripts out there that let drag-to-scroll work, they all seem to focus on being applied to normal containers and not replaced content (images) which have all kinds of specialised behaviours attached (e.g. drag an image onto a specific container to upload it to somewhere)

GigaWatt

Mhm... I see.

Oh well, at least I tried to find a solution ;).
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

Advertisement: