Support multiple pictures show, left and right sliding display

[jianminLee]

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。

[Riron]

Thanks for the PR 👍
That's a lot of code ! I will try to give it a look ASAP

[Muneem]

is this support available now? How to use this feature?

[junyung1261]

how can fetch this

[jianminLee]

@Muneem

<img item-right src="{{post.imgSrc[0]}}" imageViewer="{{post.imgSrc}}">

Like a document, just an array is passed in

[Muneem]

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?

[jianminLee]

@Muneem
of course

[Muneem]

How? Right now its only one image. I want to add ion-slide inside imageviewer

[jianminLee]

@Muneem

You have to use my pull request

[Muneem]

@jianminLee ok then how would i use that feature? there is no documentation of how to use that feauture

[jianminLee]

@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]

@jianminLee do you have working example of this feature?

[jianminLee]

@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

[Muneem]

@jianminLee i have provided array but its not showing me next images in slider. it is just opening that image where i am clicking

[jianminLee]

@Muneem

Are you sure you're using my pull request?

Please get the code here

https://github.com/jianminLee/ionic-img-viewer

[Muneem]

How to use this as npm package? I have used npm install git+ your repo. but its giving me unmet peerdependency error

[jianminLee]

@Muneem

Posted an error message

[Muneem]

[jianminLee]

@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

[Muneem]

@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

[jianminLee]

@Muneem

I'm sorry, I did not look at the wrong message carefully. I run in ionic-angular 3.6.0,
no problem

[Muneem]

@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]

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

[jianminLee]

@Muneem

I do not understand what you mean, can you put the complete code?

[Muneem]

This is request object
these all are array object so it is appending all this in 1 request

[Muneem]

one more thing can you please send me screenshot of what you have implemente?

[Muneem]

have you check request object?screenshot which i have posted?

[jianminLee]

@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

[jianminLee]

@Muneem

Then like this:

      <ion-thumbnail item-right *ngIf="post.imgSrc.length">
        <img item-right src="{{post.imgSrc[0]}}" imageViewer="{{post.imgSrc}}">
      </ion-thumbnail>

[Muneem]

@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

[jianminLee]

@Muneem

npm install https://github.com/jianminLee/ionic-img-viewer.git

This is not what?

[Muneem]

When i run npm install it foes not install from your branch Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: jianmingLee <notifications@github.com> 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) @Muneem<https://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 GitHub<#68 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AGRcTP7U9XAsHHhaMaXWyr0omGqaE6x_ks5sZEg7gaJpZM4OJCGh>.

[jianminLee]

@Muneem

If not, then I have no good idea, you can download directly to use

[Muneem]

these all changes are present here: https://github.com/jianminLee/ionic-img-viewer

[Muneem]

?

[jianminLee]

@Muneem

Yes I will merge all the changes to the author

[Muneem]

@jianminLee one suggestion put it in master and generate new npm version also.

[junyung1261]

how can i get this branch?? im using ionic 3.9.2

[seiyria]

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!

[C1PR14N055]

+1, would be useful

[LufoX11]

This is THE feature. It would be the best plugin if this kind of support would be added.

[AnthonyBillon]

Hi,
will this branch be merged with master ? I'm really interested by this feature !

[Shals08]

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.

[jianminLee]

@Shals08
look this issue!
ionic-team/ionic-framework#9819

[Shals08]

@jianminLee
Thanks....
Oh issue in ionic :(.

[A7medHub]

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();
  }

[shally12]

ionic4 angular7 This worked for me.
https://www.freakyjolly.com/ionic-4-multiple-slides-on-single-view-using-swiper-slider/#more-1410