Ion-img zoom

Hi,

I would like to be able of zooming over a image, is there something in ionic2 ion-img to do that?

Yes, see Scroll API here: http://ionicframework.com/docs/v2/api/components/scroll/Scroll/

Usage would be something like:

<ion-scroll [zoom]="true" maxZoom="20">
  <img src="path/to/image.jpg">
</ion-scroll>

Thanks, but I’ve not been able to make it working.

I’ve also tried with img-slides, but there is an issue in this topic that I suppose affects to both:

Anyone has a workaround?

I’m working on implementing it in an app right now, I’ll update with results soon.

No luck.

I gave up on it and used this plugin instead: https://github.com/keensoft/FullScreenImage-Cordova-Plugin

1 Like

I’ll give a look to the that plugin so. Many thanks!

What I’ve tried so far was:

        <ion-slides zoom>
          <ion-slide>
          <img data-src="path/to/image.jpg" slide-lazy>
          </ion-slide>
        </ion-slides>

and your example with little modifications to test:

<scroll-content>
<ion-scroll zoom="true" scrollX="true" scrollY="true" maxZoom="20" style="height: 100%;">
  <img src="path/to/image.jpg">
</ion-scroll>
</scroll-content>

I tried something similar to the second example, except it was inside an ion-content … I was able to see an image but I can’t do anything with it.

Hold on I think this is a better plugin: https://github.com/sarriaroman/photoviewer

The first plugin’s developer seems like he abandoned his project and it is not the best implementation (uses Gallery). This one has more options and feels like part of your app.

2 Likes

yes, I did a search in plugins and ended looking at that

But no luck on getting it work…

You’re talking about the plugin?
I just used it and it worked fine.

Did the following:

// add this to top
declare var PhotoViewer: any;

// then inside my function did this
viewFullScreen(image: string, title?: string): void {
  this.platform.ready()
    .then(()=>{
       if(PhotoViewer) // make sure it's loaded (works only on Android and iOS)
        PhotoViewer.show(image, title);
    });
}
2 Likes

Sorry… my fault. Facepalm mistake when adding plugin.

BTW, the plugin looks very nice

Haha it happens.

Yes it’s really good so far. I wish if it had a slideshow option so I can add display images at once. (so it would be like a fullscreen ion-slides)

Thanks #ihadeed this plugin is very useful and sharing the image also available in this

so far so good , can u give an example how did u implement it in html page

(click)="PhotoViewer.show(‘img/fullmap.png’, ‘Optional Title’)

i tried this but it didn’t work

Your HTML code has access to the class properties and methods only. You will need to create a wrapper like the code I shared earlier and call it this way from your HTML:

<some-tag (click)="viewFullScreen('path/to/image.jpg', 'Title')"></some-tag>

The strings I provided can also be variables.

tried this
<(click)=“viewFullScreen(‘img/fullmap.png’, ‘Optional Title’)”>
and got blank screen

Relative paths wouldn’t work, you need to give it an absolute path.

still blank page.
can you provide a full example with html and ts files, please

Thanks :slight_smile:

Sorry to warm up this old thread, but I’ve tried the PhotoViewer and it won’t even compile:

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':_debugCompile'.
   > Could not find com.android.support:support-v4:23.0.1.
     Searched in the following locations:
         https://repo1.maven.org/maven2/com/android/support/support-v4/23.0.1/support-v4-23.0.1.pom
         https://repo1.maven.org/maven2/com/android/support/support-v4/23.0.1/support-v4-23.0.1.jar
         https://jcenter.bintray.com/com/android/support/support-v4/23.0.1/support-v4-23.0.1.pom
         https://jcenter.bintray.com/com/android/support/support-v4/23.0.1/support-v4-23.0.1.jar
     Required by:
         :android:unspecified > com.commit451:PhotoView:1.2.4

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.