https://github.com/wollio/angular2_photoswipe
An angular2 PhotoSwipe component
https://github.com/wollio/angular2_photoswipe
angular angular2 angular6 gallery lightbox photoswipe
Last synced: 11 months ago
JSON representation
An angular2 PhotoSwipe component
- Host: GitHub
- URL: https://github.com/wollio/angular2_photoswipe
- Owner: wollio
- License: mit
- Created: 2016-05-21T16:33:25.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-09-23T13:51:38.000Z (over 2 years ago)
- Last Synced: 2025-03-19T11:19:18.149Z (12 months ago)
- Topics: angular, angular2, angular6, gallery, lightbox, photoswipe
- Language: TypeScript
- Size: 9.73 MB
- Stars: 31
- Watchers: 3
- Forks: 14
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PhotoSwipe for Angular 2+
[](https://app.codacy.com/app/wollio/angular2_photoswipe?utm_source=github.com&utm_medium=referral&utm_content=wollio/angular2_photoswipe&utm_campaign=Badge_Grade_Dashboard)
[](https://badge.fury.io/js/angular2_photoswipe)
This project was generated with [Angular CLI](https://github.com/angular/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](https://github.com/angular/universal-starter))
## Installation
##### Install NPM packages
```bash
npm install --save photoswipe
npm install --save angular2_photoswipe
```
##### Add assets in your angular.json
```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.
```typescript
import {Angular2PhotoswipeModule} from 'angular2_photoswipe';
@NgModule({
...
imports: [
BrowserModule,
Angular2PhotoswipeModule
]
...
})
export class AppModule {
...
}
```
##### HTML
Place the `npg-lightbox` somewhere in your layout.
```html
```
Add the `ngp-gallery` and the `ngp-gallery-item` in your component html.
```html
```
##### Load images in component
```typescript
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
```typescript
import {Angular2PhotoswipeModule, LightboxAdapter} from 'angular2_photoswipe';
@NgModule({
imports: [
BrowserModule,
Angular2PhotoswipeModule,
],
//Custom LightboxAdapter
providers: [
{provide : LightboxAdapter, useClass : CustomLightboxAdapter}
]
})
export class AppModule {
}
```
```typescript
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
```typescript
import { Injectable } from '@angular/core';
import { LightboxAdapter } from 'angular2_photoswipe';
@Injectable()
export class CustomLightboxAdapter extends LightboxAdapter {
enableBootstrap4 = true;
}
```
###### configure card count
```scss
.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.
```html
```
## 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`.