{"id":15067565,"url":"https://github.com/wollio/angular2_photoswipe","last_synced_at":"2025-04-10T14:23:03.703Z","repository":{"id":8689138,"uuid":"59370426","full_name":"wollio/angular2_photoswipe","owner":"wollio","description":"An angular2 PhotoSwipe component","archived":false,"fork":false,"pushed_at":"2023-09-23T13:51:38.000Z","size":10198,"stargazers_count":31,"open_issues_count":32,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-19T11:19:18.149Z","etag":null,"topics":["angular","angular2","angular6","gallery","lightbox","photoswipe"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wollio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-21T16:33:25.000Z","updated_at":"2023-09-23T13:51:47.000Z","dependencies_parsed_at":"2024-06-18T20:03:48.533Z","dependency_job_id":"9b3a1212-7313-40b2-9049-62af84d5e936","html_url":"https://github.com/wollio/angular2_photoswipe","commit_stats":{"total_commits":141,"total_committers":10,"mean_commits":14.1,"dds":0.475177304964539,"last_synced_commit":"7240ac6f497110fd055670d2399ab70447aca285"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wollio%2Fangular2_photoswipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wollio%2Fangular2_photoswipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wollio%2Fangular2_photoswipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wollio%2Fangular2_photoswipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wollio","download_url":"https://codeload.github.com/wollio/angular2_photoswipe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248233937,"owners_count":21069493,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular6","gallery","lightbox","photoswipe"],"created_at":"2024-09-25T01:24:53.009Z","updated_at":"2025-04-10T14:23:03.686Z","avatar_url":"https://github.com/wollio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PhotoSwipe for Angular 2+\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/03307ee37f9b4247b33602ab113b6bc9)](https://app.codacy.com/app/wollio/angular2_photoswipe?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=wollio/angular2_photoswipe\u0026utm_campaign=Badge_Grade_Dashboard)\n[![npm version](https://badge.fury.io/js/angular2_photoswipe.svg)](https://badge.fury.io/js/angular2_photoswipe)\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) \nversion 6.2.4.\n\nThis is a library with components and services for PhotoSwipe. \nThe official PhotoSwipe JS file is still needed.\n\nThis library supports SSR. (Tested with [Angular Universal Starter](https://github.com/angular/universal-starter))\n\n## Installation\n##### Install NPM packages\n```bash\nnpm install --save photoswipe\nnpm install --save angular2_photoswipe\n```\n\n##### Add assets in your angular.json\n```json\n\"projects\": {\n  \"your-app-name\": {\n    \"architect\": {\n      \"build\": {\n        \"assets\": [\n          // add this from here\n          { \n            \"glob\": \"**/*.@(svg|png|gif)\", \n            \"input\": \"./node_modules/photoswipe/src/css/default-skin\", \n            \"output\": \"/assets/media\" \n          }\n          // to here        \n        ]    \n      }\n    }\n  }\n}\n```\n\n##### Include the Angular2PhotoswipeModule.\n```typescript\nimport {Angular2PhotoswipeModule} from 'angular2_photoswipe';\n \n@NgModule({\n  ...\n  imports: [\n    BrowserModule,\n    Angular2PhotoswipeModule\n  ]\n  ...\n})\nexport class AppModule {\n  ...\n}\n```\n\n##### HTML\n\nPlace the `npg-lightbox` somewhere in your layout.\n\n```html\n\u003cngp-lightbox\u003e\u003c/ngp-lightbox\u003e\n```\n\nAdd the `ngp-gallery` and the `ngp-gallery-item` in your component html. \n\n```html\n\u003ca2p-gallery [galleryId]=\"sampleId\"\u003e\n  \u003cngp-gallery-item [image]=\"image1\"\u003e\u003c/ngp-gallery-item\u003e\n  \u003cngp-gallery-item [image]=\"image2\"\u003e\u003c/ngp-gallery-item\u003e\n\u003c/a2p-gallery\u003e\n```\n\n##### Load images in component\n\n```typescript\nimport { Image } from 'angular2_photoswipe';\n\n// instantiate images like this\nthis.image1 = new Image();\nthis.image1.largeUrl = 'https://picsum.photos/4934/3296/?image=1';\nthis.image1.height = 3296;\nthis.image1.width = 4934;\nthis.image1.id = 0;\nthis.image1.size = `${this.image1.width}x${this.image1.height}`;\nthis.image1.thumbUrl = 'https://picsum.photos/300/200/?image=1'; \n```\n\n##### Custom Options Adapter\n```typescript\nimport {Angular2PhotoswipeModule, LightboxAdapter} from 'angular2_photoswipe';\n \n@NgModule({\n  imports: [\n    BrowserModule,\n    Angular2PhotoswipeModule,\n  ],\n  //Custom LightboxAdapter\n  providers: [\n    {provide : LightboxAdapter, useClass : CustomLightboxAdapter}\n  ]\n})\nexport class AppModule {\n}\n```\n\n```typescript \nimport { Injectable } from '@angular/core';\nimport { LightboxAdapter } from 'angular2_photoswipe';\n\n@Injectable()\nexport class CustomLightboxAdapter extends LightboxAdapter {\n    allowPanToNext = true;\n    spacing = 0.12;\n    bgOpacity = 0.4;\n    mouseUsed = false;\n    loop = true;\n    pinchToClose = true;\n    closeOnScroll = true;\n    closeOnVerticalDrag = true;\n    hideAnimationDuration = 333;\n    showAnimationDuration = 333;\n    showHideOpacity = false;\n    escKey = true;\n    arrowKeys = true;\n    getPageURLForShare = function(shareButtonData) {\n        return window.location.href;\n    };\n}\n```\n\n##### Bootstrap 4 support\n```typescript \nimport { Injectable } from '@angular/core';\nimport { LightboxAdapter } from 'angular2_photoswipe';\n\n@Injectable()\nexport class CustomLightboxAdapter extends LightboxAdapter {\n       enableBootstrap4 = true;\n}\n```\n\n###### configure card count\n```scss \n.card-columns {\n  @include media-breakpoint-only(lg) {\n    column-count: 4;\n  }\n  @include media-breakpoint-only(xl) {\n    column-count: 5;\n  }\n}\n```\n\n###### autofill: stretch smaller images to fill the screen\nBy 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.\n```html\n\u003ca2p-gallery [galleryId]=\"sampleId\" [autoFill]=\"true\"\u003e\n  \u003cngp-gallery-item [image]=\"image1\"\u003e\u003c/ngp-gallery-item\u003e\n  \u003cngp-gallery-item [image]=\"image2\"\u003e\u003c/ngp-gallery-item\u003e\n\u003c/a2p-gallery\u003e\n```\n\n## Demo\n\nThis repository contains a demo app. the source is located in: `src/`\n\nRun `ng serve` to start the dev server for the demo. \nNavigate to `http://localhost:4200/`. \nThe app will automatically reload if you change any of the source files.\n\n## angular2_photoswipe\n\nThe library was created with the angular cli using `ng generate library`.\n\n**!!! The project's name is 'angular2-photoswipe' (with a dash) because an underline\nis not supported.**\n\n### build library\n\nTo build the library run `npm run build_lib`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwollio%2Fangular2_photoswipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwollio%2Fangular2_photoswipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwollio%2Fangular2_photoswipe/lists"}