[suggestion] zoom image when clicking on image

[avsingh999]

I would like to suggest a new feature to add when clicking on the image then image zoom Like Medium.
thank you : )

[avsingh999]

@publiclab/reviewers @jywarren @SidharthBansal @gauravano @sashadev-sky what do you think. please review me
thanks : )

[sashadev-sky]

I didn't know how Medium does it so here is a link to a medium article for everyone for quick reference: https://elemental.medium.com/femtech-startups-are-finally-innovating-for-menopause-5d16bd1fdb3d. You can click on the image to zoom once (image proportionally takes up entire viewport) and a following click would toggle this (unzoom), or just on scroll it unzooms for you automatically.

Compare to PL: https://publiclab.org/notes/Bronwen/04-29-2019/prototyping-a-tablet-microscope-like-the-cell-phone-microscope-but-bigger currently what we do is open a new tab on image click, where the image will take up the entire viewport and then you can also zoom once more.

I think @avsingh999's idea looks a lot nicer! is this something you would want to implement yourself?

Can we think of a situation where we would miss the additional zoom level provided by the PL implementation? In the PL example I provide I don't find it useful.

[gautamig54]

We already have a similar feature. On clicking on an image, it opens up separately. Then we can simply use control-plus or control-minus to zoom in and zoom out. So is this feature required?

[avsingh999]

Hi @gautamig54 @sashadev-sky I was thinking about these images in the notes https://publiclab.org/notes/Bronwen/04-29-2019/prototyping-a-tablet-microscope-like-the-cell-phone-microscope-but-bigger

example.

[avsingh999]

@sashadev-sky yeah, you are right It's not more useful but I was giving my Idea to better UI for PL.
thank you : )

Sorry for the late reply I am busy in my end sem exam.

[avsingh999]

@sashadev-sky @gautamig54 If you think it's not important and not useful you can close this issue.
thanks 😄

[sashadev-sky]

Personally, I think it is an improvement on the UI. if you want to take this on, I say go for it. It looks a lot nicer than opening a new a tab with the image in my opinion.

So, if you want to take this on, I will assign you to it! but if this is just an issue to float around, I don't think it is worth it to do such as we already have so many issues in plots2 to resolve.

But I am totally with this update 🙋and I will oversee it as reviewer if you do it :)

For a lot of users I find, we do not like things popping up in new tabs unless they absolutely must. It's just not a clean way to approach this.

A similar cool idea I wanted to implement but never got around to I found here: https://photographylife.com/what-is-exif-data. go to the photo of the desert and click on it.

I'm in for either

[jywarren]

I was thinking about this, and I think we might think about the following case:

Many images now use a URL schema like: ![filename.jpg](/i/12345.jpg) - this in Markdown. That's what our images_controller currently puts out. What if we auto-recognized that style, and, using only JavaScript, linked such images (if not already linked) to their full-res originals, which in this case would be at: /i/12345.jpg?size=original -- or for short, /i/12345.jpg?s=o?

This could be a relatively simple function that uses jQuery to scan for images that are /not/ in a link, and compare their src to a regex pattern, and when they match, wrap them in a link. Or we could look for a click event and respond by opening a new image with window.open (i think?)

[imajit]

@cesswairimu @jywarren I think when one clicks on the image, we can have something similar to https://getbootstrap.com/docs/4.0/components/modal/ to pop up the image. Can I work on this?