[Feature request] Ability to make this work with ionic-img-viewer

[Shane-Lester]

I've unsuccessfully combining this with ionic-img-viewer. Is there any way to enable pinch/zoom functionality when combined with ionic-image-loader's caching.

[ihadeed]

I tried to make this work before in #17 with no luck. I can review that module again and see what I can do. I might be able to create a combined component.

[baskin]

I've been using the 2 plugins via sth like..

    <img-loader
        imageViewer="{{getLocalPath(urlToImage)}}" (load)="cacheLocalPath($event)" 
        [src]="urlToImage">
    </img-loader>

cacheLocalPath() can be used to cache the local path in a url->local_path hash.

[Shane-Lester]

Can you give me a bit more info. I'm currently using this format in my html <img-loader [src]="picture" useImg></img-loader> where picture is a firebase.storage URL stored in a JSON object which is iterated through in my html.

I'm assuming that the load event will fire when this is loaded by the img-loader element. What do I do with the $event. I can log it and see that it is of type ImgLoader. Do I create an object with the url (picture) as a key? I've tried passing picture to a function called getLocalPath. Should this then go ahead and look something up?

Thanks for any help you can give me

[jaybloke]

I've tried what @baskin suggested, however I receive a 'Can't bind to 'imageViewer' since it isn't a known property of 'img-loader' error.

Any ideas on how to use these two in tandem?

[0x426]

I've solved handling both of the plugins like this:

My picture object contains all the data, related to the picture like the source url, picture name, etc..

Markup <img-loader src="{{ picture.pictureUrl }}" #imageViewerPicture (click)="this.showPicture($event.target, picture.pictureUrl);"></img-loader>

Function

	protected showPicture(picture: any, pictureData: any): void {

		/** create a new image viewer for the selected picture */
		const imageViewer: ImageViewer = this.imageViewerCtrl.create(picture);

		/** on image viewer present */
		imageViewer.present().then(() => {

			/** do something else here like tracking */
			return;
		});

		/** on image viewer dismiss */
		imageViewer.onDidDismiss(() => {

			/** do something else here like tracking */
			return;
		});
		return;
	}

Hope it helps someone.

Cheers Unkn0wn0x