Ionic-framework: feat(image): image + image viewer

[AmitMY]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Images load in a web fashion, from top to bottom. No image viewer, everyone need to create a custom one.
I think that everyone has images, and probably has some kind of viewer. Using a cordova native one does not feel right, because of no transition, and other ionic viewer modals are not to spec.

Expected behavior:
Have a directive (for avatar, thumbnail and basically any) that can get [source] and [thumb].
It will load the image async, and in the meanwhile show an ion-spinner with a grey background.
If there is thumb, show it, otherwise show source.

On click of that directive, it will open a modal like this: (you can pass viewOptions)

In the modal, you can share, copy, or save to device.
You can also zoom, pan, rotate 90 degrees and so on.
Zooming makes the header fade away and the background black. (See Photos app)

When click on the image, the image itself moves into the modal, and when clicking on the modal the image will move back to the directive. (This looks like default behavior on iOS. see Photos, Google Photos, WhatsApp etc..)

Note:
Both parts are very simple. async load and show image, then open a modal and have desired behavior.
However, the hard part (for me at least) is the transition. making the image look like it goes in the viewer, like native behavior.

[sfaizanh]

try this https://github.com/Riron/ionic-img-viewer

[AmitMY]

Thanks! I did not know this one before, it looks quite good (not all that I think that should be, but good enough for now.

However, this request is for this to be a part of ionic. Fully suppoted component with a native feel and look on all platforms.

[jgw96]

Hello everyone! Thanks for the feature request, i would be a big fan of something like this @AmitMY . I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

PS: This https://www.webcomponents.org/element/PolymerElements/iron-image could probably be something we could base this off.

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#193

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#194

[AmitMY]

@jgw96 Perhaps this - https://github.com/zyra/ionic-image-loader - can be forked

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.