استخدام الـ Lightbox لعرض الصور
الإصدار الذي يعمل بلا مشاكل:
"ngx-lightbox": "^2.6.1",
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Lightbox } from 'ngx-lightbox';
import { Observable, map, shareReplay } from 'rxjs';
import { CarouselWebService } from 'src/app/services/carousel-web.service';
import { ScrollService } from 'src/app/services/scroll.service';
import { PdfViwerComponent } from 'src/app/tools/pdf-viwer/pdf-viwer.component';
import { SwiperOptions } from 'swiper';
@Component({
selector: 'app-home-carousel',
templateUrl: './home-carousel.component.html',
styleUrls: ['./home-carousel.component.scss']
})
export class HomeCarouselComponent {
images: any[] = [];
private _album: any = [];
public config: SwiperOptions = {
// slidesPerView: 5,
spaceBetween: 15,
keyboard: false,
navigation: false,
pagination: false,
grabCursor: true,
loop: false,
preloadImages: true,
lazy: false,
nested: true,
centeredSlides: false,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
speed: 1000,
};
constructor(private scrollService: ScrollService,
private _lightbox: Lightbox,
private carouselWebService: CarouselWebService,
public translateService: TranslateService,
private breakpointObserver: BreakpointObserver,
private router: Router,
public dialog: MatDialog) { }
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
ngOnInit() {
this.carouselWebService.temporaryImages().subscribe(res => {
this.images = res;
});
this.carouselWebService.alwaysImages().subscribe(res => {
for (let item of res) {
this.images.push(item);
}
setTimeout(() => {
for (let item of res) {
const src = item.image;
const caption = this.translateService.currentLang === 'ar' ? item.ar_name : item.en_name;
const thumb = item.image;
const album = {
src: src,
caption: caption,
thumb: thumb
};
this._album.push(album);
}
}, 1000);
});
}
open(index: number): void {
// open lightbox
this._lightbox.open(this._album, index);
}
close(): void {
// close lightbox programmatically
this._lightbox.close();
}
openDialog(item: any) {
const dialogRef = this.dialog.open(PdfViwerComponent, {
data: { item: item },
width: '50%',
height: '90vh'
});
dialogRef.afterClosed().subscribe(result => {
});
}
navigate(page: string, inside: boolean) {
if (inside === true) {
this.scrollService.backToTopFunction();
this.router.navigate([page])
} else {
window.open(page);
}
}
}
تعليقات
إرسال تعليق