Trigger fullscreen slideshow on button click

[YusufIpek]

I wanted to know if it is possible to show the full screen Slideshow (lightBox popup?) when a button is clicked?

[Guigeek973]

I succeed to do this today !

Use this piece of code and enjoy !

onClickImage(index) { this.isToggleOn = true; this.slider.activeImageIndex = index; this.slider.imageClick.emit(index); this.slider.showLightbox(); }

I copy paste my code logic below for everyone who needs 😄

<div [hidden]="isToggleOn" class="row"> <mat-grid-list cols="6" rowHeight="1:1.3"> <mat-grid-tile *ngFor="let item of imagesObject; index as i"> <img src="{{item.thumbImage}}" alt="{{item.alt}}" (click)="onClickImage(i)" class="h-100"> </mat-grid-tile> </mat-grid-list> </div>

<div [hidden]="!isToggleOn"> <ng-image-slider [images]="imagesObject" [imageSize]="{width: '15%', height: 200}" [manageImageRatio]=true [slideImage]=3 [animationSpeed]=1 (imageClick)="onClick($event)" (lightboxClose)="onClose()" #nav></ng-image-slider> </div>

and typescript I remove mainContainer class wich makes the lightbox width: 60% so erase all problematic css and on close popup fullscreen replace all the css.

`onClickImage(index) { this.isToggleOn = true; this.slider.activeImageIndex = index; this.slider.showLightbox(); this.slider.imageClick.emit(index); }

onClick(event) { if (document.getElementById("mainContainer").classList.contains("mainContainer")) { document.getElementById("mainContainer").classList.remove('mainContainer'); } }

onClose() { if (!document.getElementById("mainContainer").classList.contains("mainContainer")) { document.getElementById("mainContainer").classList.add('mainContainer'); } }`