ng-image-slider
ng-image-slider copied to clipboard
Trigger fullscreen slideshow on button click
I wanted to know if it is possible to show the full screen Slideshow (lightBox popup?) when a button is clicked?
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'); } }`