Hi,
I would like to be able of zooming over a image, is there something in ionic2 ion-img to do that?
Hi,
I would like to be able of zooming over a image, is there something in ionic2 ion-img to do that?
Yes, see Scroll API
here: http://ionicframework.com/docs/v2/api/components/scroll/Scroll/
Usage would be something like:
<ion-scroll [zoom]="true" maxZoom="20">
<img src="path/to/image.jpg">
</ion-scroll>
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:
Anyone has a workaround?
Iām working on implementing it in an app right now, Iāll update with results soon.
No luck.
I gave up on it and used this plugin instead: https://github.com/keensoft/FullScreenImage-Cordova-Plugin
Iāll give a look to the that plugin so. Many thanks!
What Iāve tried so far was:
<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:
<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>
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.
Hold on I think this is a better plugin: 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.
yes, I did a search in plugins and ended looking at that
But no luck on getting it workā¦
Youāre talking about the plugin?
I just used it and it worked fine.
Did the following:
// 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);
});
}
Sorryā¦ my fault. Facepalm mistake when adding plugin.
BTW, the plugin looks very nice
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)
Thanks #ihadeed this plugin is very useful and sharing the image also available in this
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
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:
<some-tag (click)="viewFullScreen('path/to/image.jpg', 'Title')"></some-tag>
The strings I provided can also be variables.
tried this
<(click)=āviewFullScreen(āimg/fullmap.pngā, āOptional Titleā)ā>
and got blank screen
Relative paths wouldnāt work, you need to give it an absolute path.
still blank page.
can you provide a full example with html and ts files, please
Thanks
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.