Zoom on image in Ionic?

Ionic Framework ionic-v3
1

Has anyone managed to get an image previewer working in Ionic 2 as yet?

I am making an image gallery that when an image is selected, a previewer is displayed which allows you to then zoom in on the image. Pretty much basing my logic on this site.

I cannot get the ion-scroll component to zoom.

.image-view {
    width: 100%;
    height: 600px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center, center;
}

<ion-content class='image-modal-page'>
    <ion-scroll scrollX="true" scrollY="true" zoom="true" style='width: 100%; height: 100%;'>
        <div class='image-view' [ngStyle]="{'background-image': 'url(' + imageUrl + ')'}"></div>
    </ion-scroll>
</ion-content>
3 Likes
2

I think Ionic team needs to create an example on how to work with the zoom on an ion-scroll. No matter what I do I cannot zoom on any type of image either as an img or a div with background-image.

1 Like
3

Any success on this?

4

Nope. Unfortunately I did not get zoom working as yet.

5

I am also struggling to get this working. Some of these things are such basic needs that I hate to feel like I am reinventing the wheel.

6

I have logged this issue here.

7

:thumbsup: i need this too, it would be nice to see some working example

8

@dylanvdm I know when they updated to 1.2 you have to add the overflow-scroll=“false”

<ion-scroll zooming="true"
	direction="xy" 
	delegate-handle="zoom-pane" 
	class="zoom-pane" 
	min-zoom="1" 
	scrollbar-x="false" 
	scrollbar-y="false" 
	overflow-scroll="false">

     <img ng-src="{{imageSrc}}" >

</ion-scroll>
9

Hi robertgecy

Thanks for your response. However this specific question is for Ionic version 2 not 1.

10

Yes, I did read that! Just thought I would share the 1.2 changesthat solved my issue and maybe that carried over to Ionic 2. Just food for thought.

11

Same problem here. I’ll keep my eyes on the issue topic :frowning:

12

Hi,

I could not make it work with zoom=“true” also.

If it helps, I used the (pinch) event explained here and then using the $event.scale property I could make a pinching kind of zoom div. I just multiply the scale property to the initial width and height of the div with the image. It is not perfect but it kinda does the trick for now until someone tells us how to use the ion-scroll zoom correctly.

1 Like
13

Using the pinch event as I wrote in my previous comment and adding a timer to set the final width and height after the pinch event is over I could build a perfect Zoom experience to the user. It is a temporary fix of course.

This is the html code:

<ion-scroll (pinch)="pinchEvent($event)" scrollX="true" scrollY="true" zoom="true" style="width:100%;height:100%;text-align:center;"> <div [ngStyle]="{'background':'url('+src+') no-repeat','width' : width + 'px', 'height' : height + 'px', 'transform' : 'rotate('+rotacion+'deg)', 'background-size' : 'contain', 'background-position' : 'center'}" style="margin-top:50px;margin-bottom:50px;"></div> </ion-scroll>

And these are the .ts methods:

pinchEvent(e){ this.width = this.pinchW * e.scale; this.height = this.pinchH * e.scale; if(this.timeout == null){ this.timeout = setTimeout(()=>{ this.timeout = null; this.updateWidthHeightPinch(); }, 1000); }else{ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.timeout = null; this.updateWidthHeightPinch(); }, 1000); } } updateWidthHeightPinch(){ this.pinchW = this.width; this.pinchH = this.height; }

I hope it helps.

14

Hey there Ring,

Thank you so much for the example. I had tried the gestures example with the latest RC0 update but the (pinch) gesture was returning nothing.

Has anyone else gotten the pinch gesture to work on RC0?

2 Likes
15

Hey, any news about this? Thanks!

Looks like the best way to do this is using the plugin:

2 Likes
16

Thanks for the share! I’m using it now and it works great.

17

We’re also using that native plugin. But there MUST be a way to do this in HTML. We did this in Ionic 1 but now cannot do this in Ionic 2?!?!

Besides, the photo-viewer plugin crashes on some Android devices when opening a large image :frowning:

2 Likes
18

Hey guys,
I got a little Problem with that photo-viewer plugin.

I Have no Url of the Image/Picture which I wanna show, I only got the Image as a Base64 string. It seems like its not possible to pass the String instead of the Url. (App crashes on trying to open the Image via Base64 string)
Does anyone no how I can use the plugin with a content string instead of an Url or is it just impossible to do this?

19

Hi
you can use https://www.npmjs.com/package/ionic-img-viewer

npm i ionic-img-viewer --save

and then add
imageViewer to your base64 img

Thanks,
Daniel

2 Likes
20

Thx for that fast response!

Your alternative seems pretty interesting but i rather need the picture to open on a button click than on clicking on an image. I want to display the image only on click and not in small and then display it big on clicking to it.

but thx anyway :slight_smile: