Riron
Support multiple pictures show, left and right sliding display
sorry,my English is bad.... I have added more pictures to slide show。 It is necessary to explain here
updateImageSrc(src) {
if (Array.isArray(src)) {
let srcLen = src.length;
let safeImage: SafeUrl[] = [];
for (let i = 0; i < srcLen; i++) {
if(this.originalSrc === src[i]){
this.imageCurIndex = i;
}
if(i === 0){
this.imageChange = this._sanitizer.bypassSecurityTrustUrl(src[i]);
safeImage = safeImage.concat(this.imageUrl);
continue;
}
safeImage.push(this._sanitizer.bypassSecurityTrustUrl(src[i]));
}
this.imageUrl = safeImage;
} else {
this.originalSrc = src;
this.imageUrl.push(this._sanitizer.bypassSecurityTrustUrl(src));
}
}
Because of the animation, I have to do a lot of operations here, if you choose a picture of a, I need to show that the effect of animation, and then slide to show before or after the picture, I really no better The way.
Use the same as before, just can be passed to the array or a single image URL.
Thank you again, this project is very helpful for my work, the animation is very cool, of course, the hope of the code for your project also help。
@Muneem
<img item-right src="{{post.imgSrc[0]}}" imageViewer="{{post.imgSrc}}">
Like a document, just an array is passed in
so is it possible to add ion-slide in imageViewer?. I mean its more like gallery where user cal slide images also and they can zoom? is this support available?
How? Right now its only one image. I want to add ion-slide inside imageviewer
@jianminLee ok then how would i use that feature? there is no documentation of how to use that feauture
@Muneem
See the author's document just fine, I just added a function, and this function only need you to the array, the above reply I have given the code
@Muneem
There are examples in the author's document
<img item-right src="{{post.imgSrc[0]}}" imageViewer="{{post.imgSrc}}">
or
this.imageView.create(event.srcElement, {fullResImage: imgArr}).present();
imgArr and post.imgSrc can be an array or a string
@jianminLee i have provided array but its not showing me next images in slider. it is just opening that image where i am clicking
@Muneem
Are you sure you're using my pull request?
Please get the code here
https://github.com/jianminLee/ionic-img-viewer
How to use this as npm package? I have used npm install git+ your repo. but its giving me unmet peerdependency error
@Muneem This is the problem with the ionic framework. You can try running the program to see if it works, otherwise you can only upgrade your
@jianminLee i am using latest ionic configuration. All my things are latest. I think your branch is old so i have to downgrade few things to test this functionality
@Muneem
I'm sorry, I did not look at the wrong message carefully. I run in ionic-angular 3.6.0, no problem
@jianminLee i downgraded my version. now its installed. but still its opening one image only. i have supplied imageViewer to my array but it is not showing me other images.
@Muneem
You do not need to downgrade, I have updated it Package.json, if there is an error please posted your code
@jianminLee when i give array then it only opens 1 image and in console i get error 400 status error
<ion-slide *ngFor="let image of media" class="image-slides">
<img src={{image}} imageViewer="{{media}}">
</ion-slide>
<img item-right src="{{post.imgSrc[0]}}" imageViewer="{{post.imgSrc}}">
You do not need to use ion-slides Just add imageViewer = "{{post.imgSrc}} to your image element, Post.imgSrc is your array of pictures src, for example:
Post.imgSrc = ['http://xxxx.xxx/xxx.jpg','http://xxxx.xxx/xxx.jpg','http://xxxx.xxx/xxx.jpg','http: //xxxx.xxx/xxx.jpg '];
How you are generating img src? As i am getting error and i see its wrong src
I found issue. I am passing array of images. And you are using this as src. You are not breaking it or yo are not considering it as array of images
@Muneem
I do not understand what you mean, can you put the complete code?
This is request object these all are array object so it is appending all this in 1 request
one more thing can you please send me screenshot of what you have implemente?
@Muneem
Post.imgSrc = ['http://xxxx.xxx/xxx.jpg','http://xxxx.xxx/xxx.jpg','http://xxxx.xxx/xxx.jpg','http: //xxxx.xxx/xxx.jpg '];
You can try to http://xxxx.xxx/xxx.jpg all replaced by a valid image url, look at the effect. Casually to google a few pictures of the url
@Muneem
Then like this:
<ion-thumbnail item-right *ngIf="post.imgSrc.length">
<img item-right src="{{post.imgSrc[0]}}" imageViewer="{{post.imgSrc}}">
</ion-thumbnail>
@jianminLee can you please tell me how could i include this in ionic project? As through npm installl i am unable to include your branch in my ionic project
@Muneem
npm install https://github.com/jianminLee/ionic-img-viewer.git
This is not what?
When i run npm install it foes not install from your branch
Get Outlook for Androidhttps://aka.ms/ghei36
From: jianmingLee [email protected] Sent: Thursday, August 17, 2017 6:03:39 PM To: Riron/ionic-img-viewer Cc: Muneem; Mention Subject: Re: [Riron/ionic-img-viewer] Support multiple pictures show, left and right sliding display (#68)
@Muneemhttps://github.com/muneem
npm install https://github.com/jianminLee/ionic-img-viewer.git
This is not what?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Riron/ionic-img-viewer/pull/68#issuecomment-323083288, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AGRcTP7U9XAsHHhaMaXWyr0omGqaE6x_ks5sZEg7gaJpZM4OJCGh.
@Muneem
If not, then I have no good idea, you can download directly to use
these all changes are present here: https://github.com/jianminLee/ionic-img-viewer
@jianminLee one suggestion put it in master and generate new npm version also.
Currently it won't install because @jianminLee has an invalid semver version in the package.json. Sent a PR for that. Hopefully it will be merged, and hopefully that will get merged here!
This is THE feature. It would be the best plugin if this kind of support would be added.
Hi, will this branch be merged with master ? I'm really interested by this feature !
Hi, Am using "https://github.com/jianminLee/ionic-img-viewer/" to display the array of images by following your instructions. But there is one issue . InitialSlide attribute which am passing from my application based on user selection is not setting the image in the ion-slide immediately . There is a slight delay. Assume on clicking on the third image, am getting the first image for a second and then i get the proper image.
@Shals08 look this issue! https://github.com/ionic-team/ionic/issues/9819
This worked for me
<ion-slides *ngIf="images && images.length" style="overflow: hidden" [autoplay]="2000" [loop]="true" speed="1000">
<div *ngFor="let mage of images ;let i = index">
<ion-slide >
<img src="{{mage}}" (click)="itemSelected($event.target)" imageViewer >
</ion-slide>
</div>
</ion-slides>
import {ImageViewerController} from 'ionic-img-viewer';
constructor(private imageViewerCtrl : ImageViewerController){
}
itemSelected(imageToView)
{
const viewer = this.imageViewerCtrl.create(imageToView)
viewer.present();
}
ionic4 angular7 This worked for me. https://www.freakyjolly.com/ionic-4-multiple-slides-on-single-view-using-swiper-slider/#more-1410
