Clever Geek Handbook

How to enlarge an image inside an ionic scroll

I am working on an Ionic2 app. I want to enlarge an image inside an ionic scroll. How can i do this.

    <ion-scroll scrollX="true" scrollY="true" zoom=true>
      <img src="https://aa.com/app/package_content/s78c_e4vt6/main_images/pg_114.jpg" />
  </ion-scroll>
+3


source to share


1 answer


I can enlarge the image inside the ionic scroll by writing a little code for the tap event. This code is tested and works in android / ios ionic 2. Tap once to zoom in and tap again to zoom out. For ios, just add overflow scrolling in ionic content for smooth scrolling.

.ts:

  export class PageName {

constructor() {
}
public tap: number = 600;

tapEvent(e) {
    if (this.tap != 700) {
        this.tap = 700;
    }
    else
        this.tap = 600;
}}


HTML:

 <ion-content style="background-image:url(assets/img/image1.PNG); white-space: nowrap; overflow: scroll; overflow-x:scroll; height: 100%">
     <ion-scroll scrollX="true" scrollY="true" (tap)="tapEvent($event)" zoom="true" style="width:100%;height:100%;text-align:center;">
       <div class="scroll-item" style="  width:100%; white-space: nowrap; overflow: scroll;">
            <img [ngStyle]="{'width' : tap + 'px', 'min-width' : tap + 'px'}" alt="logo" src="assets/img/image2.PNG">
       </div>    
    </ion-scroll>  </ion-content>
+1


source






More articles:


All Articles