PhotoSwipe for Angular 2+

This project was generated with Angular CLI version 6.2.4.

This is a library with components and services for PhotoSwipe. The official PhotoSwipe JS file is still needed.

This library supports SSR. (Tested with Angular Universal Starter)

Installation

Install NPM packages

npm install --save photoswipe
npm install --save angular2_photoswipe

Add assets in your angular.json

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "assets": [
          // add this from here
          { 
            "glob": "**/*.@(svg|png|gif)", 
            "input": "./node_modules/photoswipe/src/css/default-skin", 
            "output": "/assets/media" 
          }
          // to here        
        ]    
      }
    }
  }
}

Include the Angular2PhotoswipeModule.

import {Angular2PhotoswipeModule} from 'angular2_photoswipe';
 
@NgModule({
  ...
  imports: [
    BrowserModule,
    Angular2PhotoswipeModule
  ]
  ...
})
export class AppModule {
  ...
}

HTML

Place the npg-lightbox somewhere in your layout.

<ngp-lightbox></ngp-lightbox>

Add the ngp-gallery and the ngp-gallery-item in your component html.

<a2p-gallery [galleryId]="sampleId">
  <ngp-gallery-item [image]="image1"></ngp-gallery-item>
  <ngp-gallery-item [image]="image2"></ngp-gallery-item>
</a2p-gallery>

Load images in component

import { Image } from 'angular2_photoswipe';

// instantiate images like this
this.image1 = new Image();
this.image1.largeUrl = 'https://picsum.photos/4934/3296/?image=1';
this.image1.height = 3296;
this.image1.width = 4934;
this.image1.id = 0;
this.image1.size = `${this.image1.width}x${this.image1.height}`;
this.image1.thumbUrl = 'https://picsum.photos/300/200/?image=1'; 

Custom Options Adapter

import {Angular2PhotoswipeModule, LightboxAdapter} from 'angular2_photoswipe';
 
@NgModule({
  imports: [
    BrowserModule,
    Angular2PhotoswipeModule,
  ],
  //Custom LightboxAdapter
  providers: [
    {provide : LightboxAdapter, useClass : CustomLightboxAdapter}
  ]
})
export class AppModule {
}

import { Injectable } from '@angular/core';
import { LightboxAdapter } from 'angular2_photoswipe';

@Injectable()
export class CustomLightboxAdapter extends LightboxAdapter {
    allowPanToNext = true;
    spacing = 0.12;
    bgOpacity = 0.4;
    mouseUsed = false;
    loop = true;
    pinchToClose = true;
    closeOnScroll = true;
    closeOnVerticalDrag = true;
    hideAnimationDuration = 333;
    showAnimationDuration = 333;
    showHideOpacity = false;
    escKey = true;
    arrowKeys = true;
    getPageURLForShare = function(shareButtonData) {
        return window.location.href;
    };
}

Bootstrap 4 support

import { Injectable } from '@angular/core';
import { LightboxAdapter } from 'angular2_photoswipe';

@Injectable()
export class CustomLightboxAdapter extends LightboxAdapter {
       enableBootstrap4 = true;
}

configure card count

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

autofill: stretch smaller images to fill the screen

By default photoswipe does not stretch images to fill the screen. When working with smaller images this can be undesirable. Use [autoFill]="true" to stretch smaller images.

<a2p-gallery [galleryId]="sampleId" [autoFill]="true">
  <ngp-gallery-item [image]="image1"></ngp-gallery-item>
  <ngp-gallery-item [image]="image2"></ngp-gallery-item>
</a2p-gallery>

Demo

This repository contains a demo app. the source is located in: src/

Run ng serve to start the dev server for the demo. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

angular2_photoswipe

The library was created with the angular cli using ng generate library.

!!! The project's name is 'angular2-photoswipe' (with a dash) because an underline is not supported.

build library

To build the library run npm run build_lib.