@rr2/photo-viewer v1.0.6

Angular 6 photo viewer

Usage

• Add this module to your module file (Most cases in app.modules.ts)

import {CmsFirebaseLoginModule} from '@rr2/photo-viewer';

...
    imports: [
        ...
        CmsFirebaseLoginModule   
    ];
...

• In the component.ts you want to use the photo viewer

import {PhotoViewerItem} from '@rr2/photo-viewer';

export class <...>Component implements <...> {
    public showGallery = false;
    public currentPhotoNumber = 0;
    public images: PhotoViewerItem[] = [
        // Photo number 0
        {
            alt: 'Image of skateboarder',
            src: 'https://images.unsplash.com/photo-1540163975502-39fdd64c9805?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1479b34983df1a9c91a6411f540dc210&auto=format&fit=crop&w=500&q=60',
            thumbnail_medium: '', // If not specified "src" will be used
            thumbnail_small: '', // If not specified "thumbnail_medium" will be used
            title: 'Pool Skateboarding'
        },
        // Photo number 1
        {
            alt: 'Image of lake',
            src: 'https://images.unsplash.com/photo-1540219386133-96166331d54c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8e28540a66abaa08781cbc4e8e3dea7e&auto=format&fit=crop&w=500&q=60',
            thumbnail_medium: '',
            thumbnail_small: '',
            title: 'Structure in the lake'
        }
    ];
    
    ...
...

The component's.html file

<!-- This should be as it is -->
<app-photo-viewer *ngIf="showGallery" [currentPhotoNumber]="currentPhotoNumber" (close)="showGallery = false" [images]="images"></app-photo-viewer>

<!-- This should be styled the way you want -->
<div *ngFor="let image of images; let i = index;">
    <img (click)="showGallery = true; currentPhotoNumber = i;" width="100px" src="{{ image.src }}" alt="">
</div>

*