Photo Swiper for Angular

A zero dependency (except Angular + Router obviously) touch and mobile friendly lightbox which supports server side rendering out of the box.

Install

Take a look at the demo to take a look at the result.
Install the NPM package with npm install --save ngx-photo-swiper.

Basic usage

// Import the Lightbox Module and include it in your module imports
import { LightboxModule } from "ngx-photo-swiper";

Create a list of SliderImage objets which should be displayed in the lightbox and pass them to the template.

import { SliderImage } from 'ngx-photo-swiper';

class AppComponent {
  public imageList: (SliderImage | SliderImageSmall)[] = [
    {
      caption: "Test caption 1",
      imageSRC: "image_url.com",
    },
    {
      caption: "Test caption 2",
      imageSRC: "image_url.com",
    },
  ];
}

The following code is in one of you HTML templates. The lightbox needs two parameters to work:

• the imageList parameter which provides your images
• the lightboxID parameter which assigns ever lightbox on the page a unique ID which gets used in the URL
• If you don't pass a reference to the controls no controls will appear and basically nothing in the slider works.
• If you want some sharing options you have to pass a template reference to some HTML. I have only tested Anchor Elements, so these should be fine.

<!-- Add the gallery component and pass it you images -->
<!-- Every lightbox has to have a id, so the currently open gallery can be saved in the url -->
<!-- The id should be the same each time you reload the page -->
<photo-flex-gallery [imageList]="imageList" lightboxID="test" [controls]="controlsComponent"></photo-flex-gallery>

If your lightbox should have some controls you have to pass these to the photo-gallery-component
<ng-template #controlsComponent>
  <!-- In addition you can configure the fadeoutTime, and which control should be displayed -->
  <!-- showOnMobile controls whether the controls should be displayed on mobile or not -->
  <!-- To get some custom share options pass these to the photo-controls -->
  <photo-controls
    [fadeoutTime]="1000" [fullscreen]="true" [close]="true" [arrows]="true" [showOnMobile]="true"
    [shareOptionList]="shareOptions"></photo-controls>
</ng-template>

<!-- If you have Anchor elements in you ng-template the styling will look nice -->
<!-- I will not guarantee the styling for any other element type -->
<ng-template #shareOptions>
  <a href="https://google.com">Google</a>
  <a href="https://google.com">WhatsApp</a>
  <a href="https://google.com">Instagram</a>
</ng-template>

If you want to change the style of the lib you can do so by importing the ngx-photo-swiper/lightbox.scss file. The following preferences are possible and have to be configured before you import the lightbox.scss file. Make sure you import the file in your global scss file to make sure the styles get applied correctly.

// Default margin between the images in the gallery
$image-margin             : .5rem !default;
// Lightbox background color
$backdrop-color           : #000 !default;
// Overlay (Text, controls background) color
$overlay-background-color : rgba(0, 0, 0, 0.3) !default;
// Color of the arrow keys
$arrow-background-color   : rgba(0, 0, 0, 0.3) !default;
// Text color in the slider
$overlay-text-color       : #fff !default;
// Height and width of the arrow click area
$arrow-click-radius       : ("width": 60px, "height": 80px);
// You own icons (really dont recommend chaining this, but if you want to ...)
$icon-svg                 : "";
$icon-png                 : "";

// Import the scss file after your preferences
@import "ngx-photo-swiper/lightbox.scss";

Result

The gallery

The slider with a desktop viewport

The slider with a mobile viewport (currently transitioning)

Credits

• Inspired by photoswipe
• The Icons are also from photoswipe
• The observable store was copied and modified to get soma additional functionality and angular 10 support
• ts-essentials for their exact type