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.