ngx-photo-gallery

PhotoGallery library for Angular based on PhotoSwipe.

Installation

Install from npm:

npm install --save @twogate/ngx-photo-gallery

Add PhotoGalleryModule to NgModule imports:

1import { PhotoGalleryModule } from '@twogate/ngx-photo-gallery'
2
3@NgModule({
4  ...
5  imports: [PhotoGalleryModule, ...]
6  ...
7})

with options (PhotoSwipeOptions):

1import { PhotoGalleryModule } from '@twogate/ngx-photo-gallery'
2
3@NgModule({
4  ...
5  imports: [PhotoGalleryModule.forRoot({
6    defaultOptions: {
7      arrowEl: true,
8      indexIndicatorSep: '-'
9    }
10  }), ...]
11  ...
12})

Usage

simple use:

1<div class="images" photoGalleryGroup>
2  <div class="images-item" [photoGallery]="image1.originUrl">
3    <img [src]="image1.thumbnailUrl" />
4  </div>
5  <div class="images-item" [photoGallery]="image2.originUrl">
6    <img [src]="image2.thumbnailUrl" />
7  </div>
8  <div class="images-item" [photoGallery]="image3.originUrl">
9    <img [src]="image3.thumbnailUrl" />
10  </div>
11</div>

with options (PhotoSwipeOptions):

1<div class="products" [photoGalleryGroup]="{ arrowEl: true, indexIndicatorSep: ' - ' }">
2  <div class="products-item">
3    <div class="products-item-name">{{ product1.name }}</div>
4    <div class="products-item-image" [photoGallery]="product1.image.originUrl">
5      <img [src]="product1.image.thumbnailUrl" />
6    </div>
7  </div>
8  <div class="products-item">
9    <div class="products-item-name">{{ product2.name }}</div>
10    <div class="products-item-image" [photoGallery]="product2.image.originUrl">
11      <img [src]="product2.image.thumbnailUrl" />
12    </div>
13  </div>
14</div>

on Ionic project:

1<div
2  class="images"
3  photoGalleryGroup
4  (onPhotoGalleryInit)="setSwipeBackEnabled(false)"
5  (onPhotoGalleryDestroy)="setSwipeBackEnabled(true)"
6>
7  <div class="images-item"
8    *ngFor="let image of images"
9    [photoGallery]="image.originUrl"
10  >
11    <img [src]="image.thumbnailUrl" />
12  </div>
13</div>

1import { Component, Input } from '@angular/core'
2import { NavController } from 'ionic-angular'
3
4@Component({
5...
6})
7export class AppComponent {
8  images = [...]
9
10  constructor(private navCtrl: NavController) {}
11
12  setSwipeBackEnabled(value: boolean) {
13    this.navCtrl.swipeBackEnabled = value
14  }
15}

Earlier Version

Move to twogate/ngx-photo-gallery-v0