{"id":13808239,"url":"https://github.com/BenjaminBrandmeier/angular2-image-gallery","last_synced_at":"2025-05-14T02:31:34.826Z","repository":{"id":9258680,"uuid":"54868953","full_name":"BenjaminBrandmeier/angular2-image-gallery","owner":"BenjaminBrandmeier","description":"Image Gallery built with Angular 18+, node.js and GraphicsMagick","archived":false,"fork":false,"pushed_at":"2025-03-30T07:16:22.000Z","size":1589,"stargazers_count":306,"open_issues_count":18,"forks_count":106,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-12T19:45:35.096Z","etag":null,"topics":["angular","angular-image-gallery","angular2-image-gallery","gallery","image-gallery"],"latest_commit_sha":null,"homepage":"https://oidamo.de/blog/gallery-demo","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/BenjaminBrandmeier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2016-03-28T05:50:24.000Z","updated_at":"2025-03-30T06:41:06.000Z","dependencies_parsed_at":"2024-06-18T15:37:12.231Z","dependency_job_id":"478f9298-1de9-4d75-928a-892626024443","html_url":"https://github.com/BenjaminBrandmeier/angular2-image-gallery","commit_stats":{"total_commits":245,"total_committers":10,"mean_commits":24.5,"dds":"0.23673469387755097","last_synced_commit":"17658dcfc0f0135104b9e1af19a950465072b921"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminBrandmeier%2Fangular2-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminBrandmeier%2Fangular2-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminBrandmeier%2Fangular2-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminBrandmeier%2Fangular2-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BenjaminBrandmeier","download_url":"https://codeload.github.com/BenjaminBrandmeier/angular2-image-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253943661,"owners_count":21988313,"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","angular-image-gallery","angular2-image-gallery","gallery","image-gallery"],"created_at":"2024-08-04T01:01:38.062Z","updated_at":"2025-05-14T02:31:29.812Z","avatar_url":"https://github.com/BenjaminBrandmeier.png","language":"TypeScript","readme":"# Angular 2 Image Gallery\n\n[![npm version](https://img.shields.io/npm/v/angular2-image-gallery?style=for-the-badge)](https://img.shields.io/npm/v/angular2-image-gallery?style=for-the-badge)\n[![npm downloads](https://img.shields.io/npm/dm/angular2-image-gallery?style=for-the-badge)](https://www.npmjs.com/package/angular2-image-gallery)\n\n----\u003e **compatible with Angular 18+** \u003c----\n\nResponsive image gallery designed for high resolution images.\n\nThe project consists of a gallery (+ viewer) and a script for image preparation.\n\n### Demo\n\n[https://oidamo.de/blog/gallery-demo](https://oidamo.de/blog/gallery-demo)\n\n### Fundamentals\nBefore using the gallery, you have to process all of your images with the **convert** script. \n\nThe processed images will be stored to your applications assets.\n\nThe viewer takes care of an optimal image quality being served based on the users screen resolution.\n\n### Installation\n\n#### 1. Install graphicsmagick\n\nFollow the instructions: [http://www.graphicsmagick.org/README.html#installation](http://www.graphicsmagick.org/README.html#installation)\n\n#### 2. Install dependencies\n\n```bash\nnpm install angular2-image-gallery hammerjs --save\n```\n\n#### 3. Import modules\n\n```javascript\nimports: [\n  ...,\n  Angular2ImageGalleryModule,\n  HammerModule\n],\n```\n\n#### 4. Run convert script\n\n```bash\nnode node_modules/angular2-image-gallery/convert.js \u003cpath/to/your/images\u003e\n```\n\nAdd a flag to define the order of the images inside the gallery\n\n`-n` sort by file name (default)\n\n`-d` sort chronologically by the original creation time\n\n`-c` sort by primary image color\n\nAdditional optional parameter to support multiple galleries. Add it if you want to put your images into a separate gallery.\n\n`--gName=yourGalleryName`\n\n#### 5. Embed gallery in your template\n\n```javascript\n\u003cgallery\n    [flexBorderSize]=\"3\"\n    [flexImageSize]=\"7\"\n    [galleryName]=\"'yourGalleryName'\"\n    [maxRowsPerPage]=\"100\"\n    (viewerChange)=\"yourNotificationFunction($event)\"\n    [includeViewer]=\"true\"\n    [lazyLoadGalleryImages]=\"true\"\n\u003e\u003c/gallery\u003e\n```\n\nAll parameters are optional.\n\n* **[flexBorderSize]** used to define the border thickness between the images within the gallery.\n* **[flexImageSize]** used to define the size of the images with the gallery (not the viewer).\n* **[galleryName]** used when having multiple galleries.\n* **[maxRowsPerPage]** maximum rows per gallery, this will add navigation arrows once the threshold is reached.\n* **[viewerChange]** event fires once the viewer component gets opened or closed.\n* **[includeViewer]** provides an option to manually place the viewer outside the default DOM structure. Defaults to true.\n* **[lazyLoadGalleryImages]** allows to disable lazy loading of gallery images. All images will be loaded at once when set to false. Defaults to true.\n\n## Different use cases\n### Fetching images from an external data source\n\nFetching your images from an external data source: [CLICK HERE](https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/externalDataSource.md)\n\n### I don't want to use the convert script and provide my own metadata JSON\n\nThis is possible, but not the intent of this project. Please [CLICK HERE](https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/ownJSON.md)\n\n## Troubleshooting\n\nIf the conversion process fails, make sure you have enough swap space provided.\n\nIf you experience any other issues, please raise an issue on GitHub.\n\n## Changelog\n\n### 18.0.0\n\n* Angular 18 support\n\n### 17.0.0\n\n* Angular 17 support\n\n### 16.0.0\n\n* Angular 16 support\n\n### 15.2.0\n\n* Adding optional parameter **[lazyLoadGalleryImages]** to turn off lazy loading when set to false and instead load all gallery images at once.\n\n### 15.1.0\n\n* Adding optional parameter [includeViewer] to support use cases where viewer is placed outside the gallery component manually\n\n### 15.0.0\n\n* Angular 15 support\n* Performance improvements\n\n### 14.1.0\n\n* Refactor convert script entirely\n* Provide smoother output for image conversion process\n\n### 14.0.0\n\n* Angular 14 support\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBenjaminBrandmeier%2Fangular2-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBenjaminBrandmeier%2Fangular2-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBenjaminBrandmeier%2Fangular2-image-gallery/lists"}