1.7.0 • Published 6 months ago
@twogate/ngx-photo-gallery v1.7.0
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:
import { PhotoGalleryModule } from '@twogate/ngx-photo-gallery'
@NgModule({
...
imports: [PhotoGalleryModule, ...]
...
})
with options (PhotoSwipeOptions):
import { PhotoGalleryModule } from '@twogate/ngx-photo-gallery'
@NgModule({
...
imports: [PhotoGalleryModule.forRoot({
defaultOptions: {
arrowEl: true,
indexIndicatorSep: '-'
}
}), ...]
...
})
Usage
simple use:
<div class="images" photoGalleryGroup>
<div class="images-item" [photoGallery]="image1.originUrl">
<img [src]="image1.thumbnailUrl" />
</div>
<div class="images-item" [photoGallery]="image2.originUrl">
<img [src]="image2.thumbnailUrl" />
</div>
<div class="images-item" [photoGallery]="image3.originUrl">
<img [src]="image3.thumbnailUrl" />
</div>
</div>
with options (PhotoSwipeOptions):
<div class="products" [photoGalleryGroup]="{ arrowEl: true, indexIndicatorSep: ' - ' }">
<div class="products-item">
<div class="products-item-name">{{ product1.name }}</div>
<div class="products-item-image" [photoGallery]="product1.image.originUrl">
<img [src]="product1.image.thumbnailUrl" />
</div>
</div>
<div class="products-item">
<div class="products-item-name">{{ product2.name }}</div>
<div class="products-item-image" [photoGallery]="product2.image.originUrl">
<img [src]="product2.image.thumbnailUrl" />
</div>
</div>
</div>
on Ionic project:
<div
class="images"
photoGalleryGroup
(onPhotoGalleryInit)="setSwipeBackEnabled(false)"
(onPhotoGalleryDestroy)="setSwipeBackEnabled(true)"
>
<div class="images-item"
*ngFor="let image of images"
[photoGallery]="image.originUrl"
>
<img [src]="image.thumbnailUrl" />
</div>
</div>
import { Component, Input } from '@angular/core'
import { NavController } from 'ionic-angular'
@Component({
...
})
export class AppComponent {
images = [...]
constructor(private navCtrl: NavController) {}
setSwipeBackEnabled(value: boolean) {
this.navCtrl.swipeBackEnabled = value
}
}
Earlier Version
Move to twogate/ngx-photo-gallery-v0
1.7.0
6 months ago
1.6.0
10 months ago
1.5.0
1 year ago
1.5.0-beta.2
1 year ago
1.5.0-beta.1
1 year ago
1.4.0
1 year ago
1.3.0
2 years ago
1.3.0-beta.0
2 years ago
1.2.0
2 years ago
1.2.0-beta.0
2 years ago
1.1.0
3 years ago
1.0.3-expanded
3 years ago
1.0.4
3 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.1.0
4 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago