{"id":13412559,"url":"https://github.com/kolkov/ngx-gallery","last_synced_at":"2025-12-24T08:28:27.284Z","repository":{"id":36349863,"uuid":"223669815","full_name":"kolkov/ngx-gallery","owner":"kolkov","description":"A simple responsive native gallery component for Angular 8+.","archived":false,"fork":false,"pushed_at":"2024-07-18T14:41:22.000Z","size":8697,"stargazers_count":115,"open_issues_count":62,"forks_count":56,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-09-30T22:17:59.814Z","etag":null,"topics":["angular","demo","gallery","ngx-gallery"],"latest_commit_sha":null,"homepage":"https://ngx-gallery.kolkov.ru/","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/kolkov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-11-24T00:02:06.000Z","updated_at":"2024-04-24T06:59:30.000Z","dependencies_parsed_at":"2024-06-18T15:34:18.594Z","dependency_job_id":"ed2405a2-7238-459c-beda-26e18ab02d0a","html_url":"https://github.com/kolkov/ngx-gallery","commit_stats":{"total_commits":110,"total_committers":6,"mean_commits":"18.333333333333332","dds":"0.10909090909090913","last_synced_commit":"ec445c323db952404c9bd4b4132b9504c82fc997"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolkov%2Fngx-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolkov%2Fngx-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolkov%2Fngx-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolkov%2Fngx-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kolkov","download_url":"https://codeload.github.com/kolkov/ngx-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243625150,"owners_count":20321241,"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","demo","gallery","ngx-gallery"],"created_at":"2024-07-30T20:01:26.103Z","updated_at":"2025-12-24T08:28:27.276Z","avatar_url":"https://github.com/kolkov.png","language":"TypeScript","funding_links":["https://paypal.me/AndreyKolkov"],"categories":["TypeScript","Table of Contents"],"sub_categories":["Image Libraries"],"readme":"# NgxGallery\nA simple native gallery component for Angular 8+ and 13+.\n\n[![npm version](https://badge.fury.io/js/%40kolkov%2Fngx-gallery.svg)](https://badge.fury.io/js/%40kolkov%2Fngx-gallery)\n[![demo](https://img.shields.io/badge/demo-StackBlitz-blueviolet.svg)](https://stackblitz.com/edit/kolkov-ngx-gallery)\n[![Build Status](https://travis-ci.com/kolkov/ngx-gallery.svg?branch=master)](https://travis-ci.com/kolkov/ngx-gallery)\n[![npm](https://img.shields.io/npm/dw/@kolkov/ngx-gallery.svg)](https://www.npmjs.com/package/@kolkov/ngx-gallery)\n[![](https://data.jsdelivr.com/v1/package/npm/@kolkov/ngx-gallery/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@kolkov/ngx-gallery)\n[![Coverage Status](https://coveralls.io/repos/github/kolkov/ngx-gallery/badge.svg?branch=master)](https://coveralls.io/github/kolkov/ngx-gallery?branch=master)\n[![dependencies Status](https://david-dm.org/kolkov/ngx-gallery/status.svg)](https://david-dm.org/kolkov/ngx-gallery)\n[![devDependencies Status](https://david-dm.org/kolkov/ngx-gallery/dev-status.svg)](https://david-dm.org/kolkov/ngx-gallery?type=dev)\n[![codecov](https://codecov.io/gh/kolkov/ngx-gallery/branch/master/graph/badge.svg)](https://codecov.io/gh/kolkov/ngx-gallery)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/AndreyKolkov)\n\n## Demo\nDemo is here [demo][demo]\n\nWorking code for this demo at stackblitz [example](https://stackblitz.com/edit/kolkov-ngx-gallery)\n\n## Getting Started\n\n### Installation\n\nInstall via [npm][npm] package manager \n\n```bash\nnpm install @kolkov/ngx-gallery --save\n```\n### Versions\n\n2.x.x and above - for Angular v13+\n1.x.x and above - for Angular v8+\n\n### Usage\n\nImport `ngx-gallery` module\n\n```js\nimport { HttpClientModule} from '@angular/common/http';\nimport { NgxGalleryModule } from '@kolkov/ngx-gallery';\n\n@NgModule({\n  imports: [ HttpClientModule, NgxGalleryModule ]\n})\n```\n\nThen in HTML\n\n```html\n\u003cngx-gallery [options]=\"galleryOptions\" [images]=\"galleryImages\" class=\"ngx-gallery\"\u003e\u003c/ngx-gallery\u003e\n```\n\nwhere\n\n```\nimport {Component, OnInit} from '@angular/core';\nimport {NgxGalleryOptions} from '@kolkov/ngx-gallery';\nimport {NgxGalleryImage} from '@kolkov/ngx-gallery';\nimport {NgxGalleryAnimation} from '@kolkov/ngx-gallery';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit{\n  galleryOptions: NgxGalleryOptions[];\n  galleryImages: NgxGalleryImage[];\n\n  constructor() { }\n\n  ngOnInit() {\n    this.galleryOptions = [\n      {\n        width: '600px',\n        height: '400px',\n        thumbnailsColumns: 4,\n        imageAnimation: NgxGalleryAnimation.Slide\n      },\n      // max-width 800\n      {\n        breakpoint: 800,\n        width: '100%',\n        height: '600px',\n        imagePercent: 80,\n        thumbnailsPercent: 20,\n        thumbnailsMargin: 20,\n        thumbnailMargin: 20\n      },\n      // max-width 400\n      {\n        breakpoint: 400,\n        preview: false\n      }\n    ];\n\n    this.galleryImages = [\n      {\n        small: 'assets/img/gallery/1-small.jpeg',\n        medium: 'assets/img/gallery/1-medium.jpeg',\n        big: 'assets/img/gallery/1-big.jpeg'\n      },\n      {\n        small: 'assets/img/gallery/2-small.jpeg',\n        medium: 'assets/img/gallery/2-medium.jpeg',\n        big: 'assets/img/gallery/2-big.jpeg'\n      },\n      {\n        small: 'assets/img/gallery/3-small.jpeg',\n        medium: 'assets/img/gallery/3-medium.jpeg',\n        big: 'assets/img/gallery/3-big.jpeg'\n      },{\n        small: 'assets/img/gallery/4-small.jpeg',\n        medium: 'assets/img/gallery/4-medium.jpeg',\n        big: 'assets/img/gallery/4-big.jpeg'\n      },\n      {\n        small: 'assets/img/gallery/5-small.jpeg',\n        medium: 'assets/img/gallery/5-medium.jpeg',\n        big: 'assets/img/gallery/5-big.jpeg'\n      }\n    ];\n  }\n}\n```\nadd this class to app CSS `.ngx-gallery { display: inline-block; margin-bottom: 20px; }`\n\n## API\n### Inputs\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| [options] | `NgxGalleryOptions[]` | `-` | no | Config options for the Gallery |\n| [images] | `NgxGalleryImage[]` | `-` | no | Images array |\n\n### Outputs\n\n| Output  | Description |\n| ------------- | ------------- |\n| (change)  | Triggered on image change |\n| (imagesReady)  | Triggered when images length \u003e 0 |\n| (previewOpen)  |  Triggered on preview open |\n| (previewClose)  |  Triggered on preview close |\n| (previewChange)  |  Triggered on preview image change |\n\n### Methods\n\n Name  | Description |\n| ------------- | ------------- |\n| show(index: number): void  | Shows image at index |\n| showNext(): void  | Shows next image |\n| showPrev(): void  | Shows prev image |\n| canShowNext(): boolean  | Returns true if there is next image |\n| canShowPrev(): boolean  | Returns true if there is prev image |\n| openPreview(index: number): void  | Opens preview at index |\n| moveThumbnailsLeft(): void  | Moves thumbnails to left |\n| moveThumbnailsRight(): void  | Moves thumbnails to right |\n| canMoveThumbnailsLeft(): boolean  | Returns true if you can move thumbnails to left |\n| canMoveThumbnailsRight(): boolean  | Returns true if you can move thumbnails to right |\n\n### NgxGalleryOptions\n#### Layout options\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| width  | `string` | `500px` | no | Gallery width |\n| height  | `string` | `400px` | no | Gallery height |\n| breakpoint  | `number` | `undefined` | no | Responsive breakpoint, works like media query max-width |\n| fullWidth  | `bolean` | `false` | no | Sets the same width as browser |\n| layout  | `string` | `NgxGalleryLayout.Bottom` | no | Sets thumbnails position |\n| startIndex  | `number` | `0` | no | Sets index of selected image on start |\n| linkTarget  | `string` | `_blank` | no | Sets target attribute of link |\n| lazyLoading  | `boolean` | `true` | no | Enables/disables lazy loading for images |\n\n#### Image options\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| image  | `boolean` | `true` | no | Enables or disables image |\n| imageDescription  | `boolean` | `true` | no | Enables or disables description for images |\n| imagePercent  | `number` | `75` | no | Percentage height |\n| imageArrows  | `boolean` | `true` | no | Enables or disables arrows |\n| imageArrowsAutoHide  | `boolean` | `false` | no | Enables or disables arrows auto hide |\n| imageSwipe  | `boolean` | `false` | no | Enables or disables swipe |\n| imageAnimation  | `string` | `NgxGalleryAnimation.Fade` | no | Animation type |\n| imageSize  | `string` | `NgxGalleryImageSize.Cover` | no | Image size |\n| imageAutoPlay  | `boolean` | `false` | no | Enables or disables auto play |\n| imageAutoPlayInterval  | `number` | `2000` | no | Interval for auto play (ms) |\n| imageAutoPlayPauseOnHover  | `boolean` | `false` | no | Enables or disables pause auto play on hover |\n| imageInfinityMove  | `boolean` | `false` | no | Enables or disables infinity move by arrows |\n| imageActions  | `NgxGalleryAction[]` | `[]` | no | Enables or disables navigation bullets |\n\n#### Thumbnails options\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| thumbnails  | `boolean` | `true` | no | Enables or disables thumbnails |\n| thumbnailsColumns  | `number` | `4` | no | Columns count |\n| thumbnailsRows  | `number` | `1` | no | Rows count |\n| thumbnailsPercent  | `number` | `25` | no | Percentage height |\n| thumbnailsMargin  | `number` | `10` | no | Margin between thumbnails and image |\n| thumbnailsArrows  | `boolean` | `true` | no | Enables or disables arrows |\n| thumbnailsArrowsAutoHide  | `boolean` | `false` | no | Enables or disables arrows auto hide |\n| thumbnailsSwipe  | `boolean` | `false` | no | Enables or disables swipe |\n| thumbnailsMoveSize  | `number` | `1` | no | Number of items to move on arrow click |\n| thumbnailsOrder  | `number` | `NgxGalleryOrder.Column` | no | Images order |\n| thumbnailsRemainingCount  | `boolean` | `false` | no | If true arrows are disabled and last item has label with remaining count |\n| thumbnailsAsLinks  | `boolean` | `false` | no | Enables or disables links on thumbnails |\n| thumbnailsAutoHide  | `boolean` | `false` | no | Hides thumbnails if there is only one image |\n| thumbnailMargin  | `number` | `10` | no | Margin between images in thumbnails |\n| thumbnailSize  | `string` | `NgxGalleryImageSize.Cover` | no | Thumbnail size |\n| thumbnailActions  | `NgxGalleryAction[]` | `[]` | no | Array of custom actions |\n| thumbnailClasses  | `string[]` | `[]` | no | Custom classes to add to thumbnail component |\n\n\n#### Preview options\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| preview  | `boolean` | `true` | no | Enables or disables preview |\n| previewDescription  | `boolean` | `true` | no | Enables or disables description for images |\n| previewArrows  | `boolean` | `true` | no | Enables or disables arrows |\n| previewArrowsAutoHide  | boolean: `string` | `false` | no | Enables or disables arrows auto hide |\n| previewSwipe  | `boolean` | `false` | no | Enables or disables swipe |\n| previewFullscreen  | `boolean` | `false` | no | Enables or disables fullscreen icon |\n| previewForceFullscreen  | `boolean` | `false` | no | Enables or disables opening preview in fullscreen mode |\n| previewCloseOnClick  | `boolean` | `false` | no | Enables or disables closing preview by click |\n| previewCloseOnEsc  | `boolean` | `false` | no | Enables or disables closing preview by esc keyboard |\n| previewKeyboardNavigation  | `boolean` | `false` | no | Enables or disables navigation by keyboard |\n| previewAnimation  | `boolean` | `true` | no | Enables or disables image loading animation |\n| previewAutoPlay  | `boolean` | `false` | no | Enables or disables auto play |\n| previewAutoPlayInterval  | `number` | `2000` | no | Interval for auto play (ms) |\n| previewAutoPlayPauseOnHover  | `boolean` | `false` | no | Enables or disables pouse auto play on hover |\n| previewInfinityMove  | `boolean` | `false` | no | Enables or disables infinity move by arrows |\n| previewZoom  | `boolean` | `false` | no | Enables or disables zoom in and zoom out |\n| previewZoomStep  | `number` | `0.1` | no | Step for zoom change |\n| previewZoomMax  | `number` | `2` | no | Max value for zoom |\n| previewZoomMin  | `number` | `0.5` | no | Min value for zoom |\n| previewRotate  | `boolean` | `false` | no | Enables or disables rotate buttons |\n| previewDownload  | `boolean` | `false` | no | Enables or disables download button |\n| previewBullets  | `boolean` | `false` | no | Enables or disables navigation bullets |\n\n#### Icons options\n\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| arrowPrevIcon  | `string` | `'fa fa-arrow-circle-left'` | no | Icon for prev arrow |\n| arrowNextIcon  | `string` | `'fa fa-arrow-circle-right'` | no | Icon for next arrow |\n| closeIcon  | `string` | `'fa fa-times-circle'` | no | Icon for close button |\n| fullscreenIcon  | `string` | `'fa fa-arrows-alt'` | no | Icon for fullscreen button |\n| spinnerIcon  | `string` | `'fa fa-spinner fa-pulse fa-3x fa-fw'` | no | Icon for spinner |\n| zoomInIcon  | `string` | `'fa fa-search-plus'` | no | Icon for zoom in |\n| zoomOutIcon  | `string` | `'fa fa-search-minus'` | no | Icon for zoom out |\n| rotateLeftIcon  | `string` | `'fa fa-undo'` | no | Icon for rotate left |\n| rotateRightIcon  | `string` | `'fa fa-repeat'` | no | Icon for rotate right |\n| downloadIcon  | `string` | `'fa fa-arrow-circle-down'` | no | Icon for download |\n| actions  | `NgxGalleryAction[]` | `[]` | no | Array of new custom actions that will be added to the left of the current close/zoom/fullscreen icons |\n\n### NgxGalleryImage\n\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| small  | `string/SafeResourceUrl` | `-` | no | Url used in thumbnails |\n| medium  | `string/SafeResourceUrl` | `-` | no | Url used in image |\n| big  | `string/SafeResourceUrl` | `-` | yes | Url used in preview |\n| description  | `string` | `-` | no | Description used in preview |\n| url  | `string` | `-` | no | Url used in link |\n| label  | `string` | `-` | no | Label used for aria-label when thumbnail is a link |\n\n### NgxGalleryAnimation\n- `Fade` (default)\n- `Slide`\n- `Rotate`\n- `Zoom`\n\n### NgxGalleryImageSize\n- `Cover` (default)\n- `Contain`\n\n### NgxGalleryLayout\n- `Top`\n- `Bottom` (default)\n\n### NgxGalleryOrder\n- `Column` (default)\n- `Row`\n- `Page`\n\n### NgxGalleryAction\n- `icon` | Type: `string` - icon for custom action\n- `disabled` | Type: `boolean` | Default value: `false` - if the icon should be disabled\n- `titleText` | Type: `string` | Default value: `''` - text to set the title attribute to\n- `onClick` | Type: `(event: Event, index: number) =\u003e void` - Output function to call when custom action icon is clicked\n\n## What's included\n\nWithin the download you'll find the following directories and files. You'll see something like this:\n\n```\nngx-gallery/\n└── projects/\n    ├── gallery/\n    └── gallery-app/\n```\n`gallery/` - library\n\n`gallery-app/` - demo application\n\n\n## Contributing\n\nPlease read through our [contributing guidelines](https://github.com/kolkov/ngx-gallery/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.\n\nEditor preferences are available in the [editor config](https://github.com/kolkov/ngx-gallery/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at \u003chttp://editorconfig.org\u003e.\n\n## Versioning\n\nFor transparency into our release cycle and in striving to maintain backward compatibility, NgxGallery is maintained under [the Semantic Versioning guidelines](http://semver.org/).\n\nSee [the Releases section of our project](https://github.com/kolkov/ngx-gallery/releases) for changelogs for each release version.\n\n## Creators\n\n**Andrey Kolkov**\n\n* \u003chttps://github.com/kolkov\u003e\n\n## Credits\n\nThis library is being fully rewritten for next Angular versions from original abandoned library written by Łukasz Gałka. I maintained full compatibility with the original library at the api level.\n\u003chttps://github.com/lukasz-galka/ngx-gallery\u003e\n\n## Donate\n\nIf you like my work, and I save your time you can buy me a :beer: or :pizza: [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/AndreyKolkov)\n\n[npm]: https://www.npmjs.com/\n[demo]: https://kolkov-ngx-gallery.stackblitz.io/\n[example]: https://stackblitz.com/edit/kolkov-ngx-gallery\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolkov%2Fngx-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkolkov%2Fngx-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolkov%2Fngx-gallery/lists"}