# Ion-img zoom

**URL:** <https://forum.ionicframework.com/t/ion-img-zoom/57835>\
**Category:** ionic-v3\
**Created:** [July 18, 2016, 11:41am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835 "2016-07-18T11:41:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![brozada](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@brozada](https://forum.ionicframework.com/u/brozada)\
**Post date:** [July 18, 2016, 11:41am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/1 "2016-07-18T11:41:36Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 18, 2016, 12:02pm UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/2 "2016-07-18T12:02:01Z")

</div>

Yes, see `Scroll API` here: [http://ionicframework.com/docs/v2/api/components/scroll/Scroll/](http://ionicframework.com/docs/v2/api/components/scroll/Scroll/)

Usage would be something like:

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

```

---

<div class="post-metadata">

**Author:** ![brozada](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@brozada](https://forum.ionicframework.com/u/brozada)\
**Post date:** [July 20, 2016, 9:15am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/3 "2016-07-20T09:15:22Z")

</div>

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:

> <https://github.com/ionic-team/ionic/issues/5039>

Anyone has a workaround?

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 9:16am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/4 "2016-07-20T09:16:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 9:38am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/5 "2016-07-20T09:38:07Z")

</div>

No luck.

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

---

<div class="post-metadata">

**Author:** ![brozada](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@brozada](https://forum.ionicframework.com/u/brozada)\
**Post date:** [July 20, 2016, 9:56am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/6 "2016-07-20T09:56:20Z")

</div>

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

What I’ve tried so far was:

```auto
        <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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 9:57am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/7 "2016-07-20T09:57:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 10:03am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/8 "2016-07-20T10:03:39Z")

</div>

Hold on I think this is a better plugin: [https://github.com/sarriaroman/photoviewer](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.

---

<div class="post-metadata">

**Author:** ![brozada](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@brozada](https://forum.ionicframework.com/u/brozada)\
**Post date:** [July 20, 2016, 10:04am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/9 "2016-07-20T10:04:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brozada](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@brozada](https://forum.ionicframework.com/u/brozada)\
**Post date:** [July 20, 2016, 10:48am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/10 "2016-07-20T10:48:26Z")

</div>

But no luck on getting it work…

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 10:52am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/11 "2016-07-20T10:52:48Z")

</div>

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

Did the following:

```auto
// 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);
    });
}

```

---

<div class="post-metadata">

**Author:** ![brozada](https://avatars.discourse-cdn.com/v4/letter/b/8e7dd6/32.png) [@brozada](https://forum.ionicframework.com/u/brozada)\
**Post date:** [July 20, 2016, 11:01am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/12 "2016-07-20T11:01:46Z")

</div>

Sorry… my fault. Facepalm mistake when adding plugin.

BTW, the plugin looks very nice

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 20, 2016, 11:02am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/13 "2016-07-20T11:02:53Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![srras](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@srras](https://forum.ionicframework.com/u/srras)\
**Post date:** [July 29, 2016, 10:40am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/14 "2016-07-29T10:40:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![amrayoub](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amrayoub/32/101916_2.png) [@amrayoub](https://forum.ionicframework.com/u/amrayoub)\
**Post date:** [July 29, 2016, 7:18pm UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/15 "2016-07-29T19:18:42Z")

</div>

> [@ihadeed](#):
>
> 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);  
> });  
> }

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

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 29, 2016, 7:31pm UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/16 "2016-07-29T19:31:21Z")

</div>

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:

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

```

The strings I provided can also be variables.

---

<div class="post-metadata">

**Author:** ![amrayoub](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amrayoub/32/101916_2.png) [@amrayoub](https://forum.ionicframework.com/u/amrayoub)\
**Post date:** [July 29, 2016, 7:55pm UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/18 "2016-07-29T19:55:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [July 29, 2016, 8:08pm UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/19 "2016-07-29T20:08:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![amrayoub](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amrayoub/32/101916_2.png) [@amrayoub](https://forum.ionicframework.com/u/amrayoub)\
**Post date:** [July 29, 2016, 8:49pm UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/20 "2016-07-29T20:49:23Z")

</div>

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

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![oh\_lordy](https://avatars.discourse-cdn.com/v4/letter/o/9fc29f/32.png) [@oh\_lordy](https://forum.ionicframework.com/u/oh_lordy)\
**Post date:** [October 19, 2016, 9:46am UTC](https://forum.ionicframework.com/t/ion-img-zoom/57835/21 "2016-10-19T09:46:58Z")

</div>

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.
```

[Next page](https://forum.ionicframework.com/t/ion-img-zoom/57835.md?page=2)