I’ve implemented a simple gallery; it consists of a page with a grid of images and when one image is clicked, a modal opens with the slider interface and uses the index of the image clicked as the slider’s initial slide. The issue is that it doesn’t load the slider properly; it starts with the slide at index 0 and afterwards abruptly switches to the slide set as initial. I’ve set up a repo for it; I’m not sure if I’m the only one with this problem or else I’d make an actual issue out of it so…
https://github.com/AleFons/sliderDemo
html for page that calls modal:
<ion-grid>
<ion-row wrap>
<ion-col width-50 *ngFor="let image of imageStorage; let i = index" (click)="openImage(i)">
<img class="thumbs" src="data:image/jpeg;base64,{{ image }}"/>
</ion-col>
</ion-row>
</ion-grid>
the openImage() function:
openImage(index: number){
let popover = this.modalCtrl.create(ImagePopover,{
imageStorage: this.imageStorage,
image_index: index
});
popover.present();
}
js for the modal:
export class ImagePopover {
imageStorage : any;
index: number;
slideOptions : any;
constructor(
public view: ViewController,
public nav: NavController,
public params: NavParams
){
this.imageStorage = this.params.get("imageStorage")
this.index = this.params.get("image_index")
this.slideOptions = {
initialSlide: this.index,
loop: true,
pager: true
};
}
}
and html for the modal:
<ion-slides [options]="slideOptions">
<ion-slide *ngFor="let image of imageStorage">
<img class="centered" src="data:image/jpeg;base64,{{ image }}/>
</ion-slide>
</ion-slides>
<ion-fab bottom center>
<button primary ion-fab (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-fab>