Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Mod Requests => Topic started by: GigaWatt on March 22, 2018, 12:44:26 AM

Title: Dragging the privew of an image in it's view space
Post by: GigaWatt on March 22, 2018, 12:44:26 AM
I posted about this in the SMF 2.0.x support forum (link (https://www.simplemachines.org/community/index.php?topic=559376)), 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.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.mediafire.com%2Fconvkey%2F23d1%2Fwagvchk6r07ib83zg.jpg&hash=1f90913dbb42733a442728fd20cdd46fdaee524b)

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 ;)).
Title: Re: Dragging the privew of an image in it's view space
Post by: GigaWatt on September 28, 2018, 07:20:16 PM
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 :).
Title: Re: Dragging the privew of an image in it's view space
Post by: Arantor on September 29, 2018, 03:55:56 AM
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.
Title: Re: Dragging the privew of an image in it's view space
Post by: GigaWatt on September 29, 2018, 01:01:11 PM
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?
Title: Re: Dragging the privew of an image in it's view space
Post by: Arantor on September 29, 2018, 01:03:01 PM
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)
Title: Re: Dragging the privew of an image in it's view space
Post by: GigaWatt on September 29, 2018, 01:09:35 PM
Mhm... I see.

Oh well, at least I tried to find a solution ;).