Installations

npm install @twogate/ngx-photo-gallery

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

22.11.0

NPM Version

10.9.0 Pull Requests

Open

0

Total

8

Closed

0

Merged

8

Issues

Open

5

Total

7

Closed

2

Releases

Unable to fetch releases

Languages

4

SCSS

TypeScript

JavaScript

HTML

SCSS (53.6%)

TypeScript (32.78%)

JavaScript (7.87%)

HTML (5.76%)

Developer

twogate

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

12 Stars

41 Commits

4 Forks

2 Watchers

2 Branches

6 Contributors

Updated on Mar 25, 2025

Maintainers

6

View All 6 Contributors

Package Meta Information

Latest Version

1.8.1

Package Id

@twogate/ngx-photo-gallery@1.8.1

Unpacked Size

242.69 kB

Size

100.70 kB

File Count

22

NPM Version

10.9.0

Node Version

22.11.0

Published on

Dec 10, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

photoswipe tslib

Peer Dependencies

2

@angular/common @angular/core

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.4

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More