Sir,

Is it possible to add the functionality of lazy loading the source image?

Preview a default image or spinner until the actual image get loaded.

Thank You.

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request
It must be great If you provide the other usage options such as via controller. So we could bind custom method as an event on the component

Describe Preferred Solution
Usage via controller like ionic action sheet, alert or toast

Describe Alternatives

Related Code

Additional Context

Thanks

Bug Report

Ionic version:

Current behavior:
Double tap not working after you exit viewer and enter it once again until you resize window of browser.

Expected behavior:
Double tap should work after you exit viewer and enter it once again.

Steps to reproduce:
Reproduced locally as well here https://ionic4-image-viewer-example.netlify.com/home.
Click on the image, exit the viewer by clicking X, click on the image once again - double tap (zooming) stops working until you resize the window or switch from portrait to landscape mode (Android)

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.24
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

I am using the directive in the img tag like below.
<img [src]="image" ionImgViewer onerror="src='assets/imgs/no-image.png'"/>

And the image src is null, the alternative(no-image.png) will be displayed like below.

But, when I clicked the image to enlarge it. It shows like below.

Describe Preferred Solution

When img src is null and the image is clicked, pls do not anything or show other user assigned alternative image like no-img.png.

Describe Alternatives

Related Code

Additional Context

Hi! I hope you're having a good day.

I have a problem with the first time open a image. I can't zoom it and if i drag it, it drags to right or left. But when i close that first image and open it again, all works ok, the image can zoom and already it doesn't let me drag and stay it in the middle as it should be.

This is my code

<ion-slides scrollbar="true">
                <ion-slide>
                    <ion-img ionImgViewer class="image" src="{{'https://umbrella.com/apiExample'+img1.substring(1)}}" scheme="dark"></ion-img>
                </ion-slide>
            
                <ion-slide>
                    <ion-img ionImgViewer class="image" src="{{'https://umbrella.com/apiExample'+img2.substring(1)}}" scheme="dark"></ion-img>
                </ion-slide>
          </ion-slides>

And this is what's happening:

If I leave the cursor pressed, the image stays where I dragged it. But as i said, when close the image, and open it again, all works good.

I don't know, maybe it just happens to me.

Thanks!!!

Feature Request

Ionic version:

[ ] 4.x
[x] 5.x

Describe the Feature Request

Add compatibility with Ionic 5.

Seems to work fine on Ionic 5. I have not found any issues, but npm ERR! peer dep missing: @ionic/[email protected]

Describe Preferred Solution

Remove the peer dep missing error on install/update with npm when using Ionic 5.

Hi,
how can I change the font size of title and text?
With size="small" works not? Thx.
<ion-img-viewer title="" text="" src="" >

Bug Report

Ionic version:

[x] 4.x

Current behavior:
Image doesn't gets close on click ob back button in android.

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request
When I tap on the image, it opens up the full-screen image one at a time. Let's say there is a gallery and I want to slide through multiple images when it is in the full-screen mode.

Describe Preferred Solution
The component recognizes the other ion-img-viewer elements on the side and shows the opportunity to slide to them.

Describe Alternatives
Provide an array to the property of src and slide to all of the images.

Related Code

<ion-img-viewer src="['image1', 'image2', 'image3]" activeIndex="0">

or

<ion-img-viewer src="image1">
<ion-img-viewer src="image2">

Additional Context
Alternative component: https://fivethree-team.github.io/ionic-4-components/gallery

How can I change the maximum zoom or how much the image scales?

i think now max scale to 3...

Hello,

Is it possible to ask for to do zoom on the image without click on it?

Thank you

Hey men,
  every time I swipe the following error appears

Another query, is there a possibility that this plugin works in ionc 3?

Bug Report

**Ionic version: **
Ionic CLI: 6.11.8
Ionic Framework: @ionic/angular 5.5.2

Current behavior:
I have a modal that contains a button to open image viewer. After dismissing the image viewer, mobile scroll stops working while mouse scroll event works normally. Swiping down triggers closing the parent modal that contains button to open the image viewer.

I presume that this code is causing the bug but was unable to solve it by myself. The code is from ngx-ionic-image-viewer.umd.js file on line 397

modal.onWillDismiss().then((/**
 * @return {?}
  */
  function () {
       document.removeEventListener('mousedown', _this.swipeStart, true);
       document.removeEventListener('mousemove', _this.swipeMove, true);
       document.removeEventListener('mouseup', _this.swipeMove, true);
       document.removeEventListener('touchstart', _this.swipeStart, true);
       document.removeEventListener('touchmove', _this.swipeMove, true);
       document.removeEventListener('touchend', _this.swipeMove, true);
 }));

This is the link to a video show the behaviour: video

This is my first time reporting a bug so I hope I did it correctly.

Thanks!

i have an ionic modal page which contains some pictures if i clicked one of them to view it inside a model and closed this modal viewer my ionic modal is freezing untill u close it.

Bug Report

Ionic version:

[x] 4.x
Latest ionic version

Current behavior:
i cannot update angular dependences because of this issue i'm having.

Expected behavior:
how to fix this?
thanks.

Steps to reproduce:

Related code:

`
Package "ngx-ionic-image-viewer" has an incompatible peer dependency to "@angular/common" (requires "^8.2.13" (extended), would install "10.0.14").

Package "ngx-ionic-image-viewer" has an incompatible peer dependency to "@angular/core" (requires "^8.2.13" (extended), would install "10.0.14").
`

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.5 (C:\Users\*\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Img is easy to manipulate the style.
I've tested and the highResSrc works.
Seen that img element lose src once ionImgViewer directive is applied

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Context

Hello

I am using this package into ionic 5

here is my ionic info

Ionic:

Ionic CLI : 6.16.3 (C:\Users\admin\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.4.0
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 9.0.6
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : not available

Utility:

cordova-res : 0.15.3
native-run : 1.4.0

System:

NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

so when we use open image view from one existing modal popup then it will fire like this error

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.[bug]:

So can you help us

please see example screen cast

https://www.loom.com/share/bc1404f2df2747e7912f0066ba53f4e5

Thank you

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Hi, using the Controller Feature with modalController i set srcFallback so when i set src to null or just empty string (trying to reproduce fail behaviour) the fallback its no loading the backup image, So I tested on the Stackblitz demo and the same.

Expected behavior:

srcFallback on ModalController set the image when src fails

Steps to reproduce:

Just overwrite on stackblitz demo (https://stackblitz.com/github/SimonGolms/ngx-ionic-image-viewer/tree/master/demo) with this:

  async openViewer() {
    const modal = await this.modalController.create({
      component: ViewerModalComponent,
      componentProps: {
        src: '', // required <--- here just null or empty
        srcFallBack: 'https://i.picsum.photos/id/237/200/200.jpg',
        title: 'Silhoutte (Programmatic)', // optional
        text: 'Photo by Mayur Gala on Unsplash' // optional
      },
      cssClass: 'ion-img-viewer', // required
      keyboardClose: true,
      showBackdrop: true
    });

    return await modal.present();
  }

Then Open the Modal With the Button at the bottom of the demo.

When I test like this working fine

  <ion-img-viewer
      title="Silhoutte (Scheme / Light)"
      text="Photo by Mayur Gala on Unsplash"
      [src]=""
      [srcFallback]="'https://i.picsum.photos/id/1040/200/200.jpg'"
    ></ion-img-viewer>

Related code:

 Just use the same stackblitz demo
 (https://stackblitz.com/github/SimonGolms/ngx-ionic-image-viewer/tree/master/demo)

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.5.0 (C:\Users\orion\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.0, (and 12 other plugins)

Utility:

   cordova-res (update available: 0.12.1) : 0.11.0
   native-run                             : 1.0.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\orion\AppData\Local\Android\Sdk)
   NodeJS            : v10.18.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

i'm trying use this plugin with ion-slide

<ion-slide *ngFor="let b of product.images"> <ion-img-viewer scheme="dark" [src]="b.src"></ion-img-viewer> </ion-slide>

Feature Request

Users of this library should be able to change the position and content of the close button. Maybe allow an ng-content spot for the button?

Ionic version:

[x] 4.x

Describe the Feature Request

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Context

Hi,
Apparently it's not working with innerHTML embedded code.
<div [innerHTML]="contenu"></div>
contenu = '<img src="demoimage.png" ionImgViewer />';

Any chance to get it work after html render ?

Thanks

ionic: ^5.0.0
angular: @angular/core": "~8.1.2"

browser version its working fine with that error.
Actual device its not working. it overlays the app with modal, no display.

I have this error

compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'size' since it isn't a known property of 'ion-title'.

1. If 'ion-title' is an Angular component and it has 'size' input, then verify that it is part of this module.
2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   
   
   <ion-title [ERROR ->][size]="titleSize">{{ title }}

How can i fixed this problem? I tried to use in app.module.ts CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA but the error persist

If I load an image via http://..... it will not load initially. Once the image has been cached or if I do something to force the image to render (i.e. double tap, zoom, etc) then it will show up.

Not doing anything fancy.

async presentImage() {
    event.stopPropagation();
    const modal = await this.modalController.create({
      component: ViewerModalComponent,
      componentProps: {
        srcHighRes: this.item.imageUrl,
        title: this.item.title,
      },
      cssClass: "ion-img-viewer",
      keyboardClose: true,
      showBackdrop: true,
    });

    return await modal.present();
}

<div class="img-wrapper issue-cover" (click)="presentImage()">
     <ion-img [src]="item.thumbnail"></ion-img>
</div>

If I were to set the srcHighRes property to item.thumbnail the image would show up when I initially click on it because it's been loaded already. But when it's set to item.imageUrl it will not load until it is cached.

Bug Report

Ionic version:

[x] 4.11.7

Current behavior:

when I move image to left or right after zooming, the image position changed on the screen.

Expected behavior:

when I move image to left or right after zooming, the image position must be not changed.

Steps to reproduce:

1- tap the image
2- the image on screen now
3- try to zoom in
4- stop zooming
5- now try to drag image to left or to right, the image position changed and not move to desired direction.

Related code:

<img width="150" height="150" src="{{ message?.message }}" ionImgViewer scheme="dark" />

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.22
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 14 other plugins)

Utility:

   cordova-res : 0.8.1 
   native-run  : 0.2.7 (update available: 0.3.0)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v12.14.0 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.2.1 Build version 11B500

Please have a look at the below screenshot and prevent the default drag

Bug Report

It's cannot build with "strict": true in tsconfig.json

Ionic version:

[x] 4.x

Current behavior:

Throw chaos errors

Expected behavior:

Peaceful build pass

Steps to reproduce:

git clone [email protected]:SimonGolms/ngx-ionic-image-viewer.git
cd ngx-ionic-image-viewer/demo
// Edit tsconfig.json below
npm install
npm run build -- --prod

Related code:

// tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "strict": true,   // I'm here 0/
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@angular/*": ["../node_modules/@angular/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Other information:

build log

> [email protected] build /Users/usera/Desktop/projects/ngx-ionic-image-viewer/demo
> ng build "--prod"


ERROR in node_modules/ngx-ionic-image-viewer/ngx-ionic-image-viewer.d.ts.NgxIonicImageViewerComponent.html(5,3): Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.
node_modules/ngx-ionic-image-viewer/ngx-ionic-image-viewer.d.ts.ViewerModalComponent.html(1,13): Object is possibly 'undefined'.
node_modules/ngx-ionic-image-viewer/ngx-ionic-image-viewer.d.ts.ViewerModalComponent.html(22,13): Object is possibly 'undefined'.```

Bug Report

Ionic version:

[x] 5.x

Library version:
0.7.0

Current behavior:

Expected behavior:

Steps to reproduce:

When I use this library to show a local image in assets without variable, it works well. But when I use it by a variable like code below, the enlarged image will be blank.

Related code:

Component:

testUrl: string = 'assets/imgs/test.jpg';

Template:

<img ionImgViewer [src]="testUrl">

Other information:

Ionic info:

insert the output from ionic info here