{"id":15295289,"url":"https://github.com/lukasz-galka/ngx-gallery","last_synced_at":"2025-05-16T06:06:43.102Z","repository":{"id":44007512,"uuid":"84799430","full_name":"lukasz-galka/ngx-gallery","owner":"lukasz-galka","description":"Angular image gallery plugin","archived":false,"fork":false,"pushed_at":"2020-07-15T04:33:01.000Z","size":403,"stargazers_count":435,"open_issues_count":103,"forks_count":171,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-03T23:32:29.370Z","etag":null,"topics":["angular","gallery","ngx","ngx-gallery"],"latest_commit_sha":null,"homepage":"https://lukasz-galka.github.io/ngx-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/lukasz-galka.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T08:01:54.000Z","updated_at":"2024-12-23T13:32:02.000Z","dependencies_parsed_at":"2022-07-09T14:46:27.332Z","dependency_job_id":null,"html_url":"https://github.com/lukasz-galka/ngx-gallery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasz-galka%2Fngx-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasz-galka%2Fngx-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasz-galka%2Fngx-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasz-galka%2Fngx-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasz-galka","download_url":"https://codeload.github.com/lukasz-galka/ngx-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254231756,"owners_count":22036418,"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","gallery","ngx","ngx-gallery"],"created_at":"2024-09-30T17:09:21.427Z","updated_at":"2025-05-16T06:06:38.092Z","avatar_url":"https://github.com/lukasz-galka.png","language":"TypeScript","funding_links":["https://www.paypal.me/galer88"],"categories":[],"sub_categories":[],"readme":"**Off until 11.06.2018**\n\n\n\n[![npm version](https://img.shields.io/npm/v/ngx-gallery.svg)](https://www.npmjs.com/package/ngx-gallery)\n[![Downloads](https://img.shields.io/npm/dm/ngx-gallery.svg)](https://www.npmjs.com/package/ngx-gallery)\n\u003c!-- [![DevDependencies](https://david-dm.org/lukasz-galka/ngx-gallery/dev-status.svg)](https://david-dm.org/lukasz-galka/ngx-gallery?type=dev) --\u003e\n[![licence](https://img.shields.io/npm/l/ngx-gallery.svg)](https://www.npmjs.com/package/ngx-gallery)\n[![Build Status](https://travis-ci.org/lukasz-galka/ngx-gallery.svg?branch=master)](https://travis-ci.org/lukasz-galka/ngx-gallery)\n[![Coverage Status](https://coveralls.io/repos/github/lukasz-galka/ngx-gallery/badge.svg?branch=master)](https://coveralls.io/github/lukasz-galka/ngx-gallery?branch=master)\n\n# NgxGallery\nAngular image gallery plugin\n\n# Demo\n[Link](https://lukasz-galka.github.io/ngx-gallery-demo/)\n\n# Playground\nYou can play with gallery using [Plunker](https://plnkr.co/edit/D1tdBCeFo6L9tMOCOb9p?p=preview) or [CodePen](https://codepen.io/lukasz-galka/project/editor/XGgxrL)\n\n# Prerequisites\n- [Font Awesome](http://fontawesome.io/) (required for icons)\n\n```npm install font-awesome --save```\n\nFor angular-cli based projects insert styles into .angular-cli.json\n\n````\n\"styles\": [\n    ...\n    \"../node_modules/font-awesome/css/font-awesome.css\"\n]\n````\n\n- [Hammerjs](http://hammerjs.github.io/) (required for swipe)\n\n```npm install hammerjs --save```\n\n````\nimport 'hammerjs';\n````\n\n# SystemJS\n\n**If you are not using SystemJS you can skip this section.**\n```\nmap: {\n  'ngx-gallery': 'node_modules/ngx-gallery/bundles/ngx-gallery.umd.js',\n}\n```\n\n# Angular Material\n\n**If you are not using Angular Material you can skip this section.**\n\nAngular Material is using `transform: translate3d(0,0,0);` in components styles. Unfortunately  `transform` changes positioning context and preview won't work properly. To avoid this situation you have to override material styles, for example:\n\n````\n@import \"~@angular/material/prebuilt-themes/indigo-pink.css\"; // your theme\n\n.mat-sidenav-container, .mat-sidenav-content, .mat-tab-body-content {\n    transform: none !important;\n}\n````\n\nYou can read more about this issue [here](https://github.com/angular/material2/issues/998)\n\n# Installation\n```npm install ngx-gallery --save```\n\n# NgxGalleryOptions\n\n- `width` | Type: `string` | Default value: `'500px'` - gallery width\n- `height` | Type: `string` | Default value: `'400px'` - gallery height\n- `breakpoint` | Type: `number` | Default value: `undefined` - responsive breakpoint, works like media query max-width\n- `fullWidth` | Type: `boolean` | Default value: `false` - sets the same width as browser\n- `layout` | Type: `string` | Default value: `NgxGalleryLayout.Bottom` - sets thumbnails position\n- `startIndex` | Type: `number` | Default value: `0` - sets index of selected image on start\n- `linkTarget` | Type: `string` | Default value: `_blank` - sets target attribute of link\n- `lazyLoading` | Type: `boolean` | Default value: `true` - enables/disables lazy loading for images\n\n- `image` | Type: `boolean` | Default value: `true` - enables or disables image\n- `imageDescription` | Type: `boolean` | Default value: `true` - enables or disables description for images\n- `imagePercent` | Type: `number` | Default value: `75` - percentage height\n- `imageArrows` | Type: `boolean` | Default value: `true` - enables or disables arrows\n- `imageArrowsAutoHide` | Type: `boolean` | Default value: `false` - enables or disables arrows auto hide\n- `imageSwipe` | Type: `boolean` | Default value: `false` - enables or disables swipe\n- `imageAnimation` | Type: `string` | Default value: `NgxGalleryAnimation.Fade` - animation type\n- `imageSize` | Type: `string` | Default value: `NgxGalleryImageSize.Cover` - image size\n- `imageAutoPlay` | Type: `boolean` | Default value `false` - enables or disables auto play\n- `imageAutoPlayInterval` | Type: `number` | Default value: `2000` - interval for auto play (ms)\n- `imageAutoPlayPauseOnHover` | Type: `boolean` | Default value: `false` - enables or disables pouse auto play on hover\n- `imageInfinityMove` | Type: `boolean` | Default value: `false` - enables or disables infinity move by arrows\n- `imageActions` | Type: `NgxGalleryAction[]` | Default value: `[]` - Array of custom actions\n- `imageBullets` | Type: `boolean` | Default value: `false` - enables or disables navigation bullets\n\n- `thumbnails` | Type: `boolean` | Default value: `true` - enables or disables thumbnails\n- `thumbnailsColumns` | Type: `number` | Default value: `4` - columns count\n- `thumbnailsRows` | Type: `number` | Default value: `1` - rows count\n- `thumbnailsPercent` | Type: `number` | Default value: `25` - percentage height\n- `thumbnailsMargin` | Type: `number` | Default value: `10` - margin between thumbnails and image\n- `thumbnailsArrows` | Type: `boolean` | Default value: `true` - enables or disables arrows\n- `thumbnailsArrowsAutoHide` | boolean: `string` | Default value: `false` - enables or disables arrows auto hide\n- `thumbnailsSwipe` | Type: `boolean` | Default value: `false` - enables or disables swipe\n- `thumbnailsMoveSize` | Type: `number` | Default value: `1` - number of items to move on arrow click\n- `thumbnailsOrder` | Type: `number` | Default value: `NgxGalleryOrder.Column` - images order\n- `thumbnailsRemainingCount` | Type: `boolean` | Default value: `false` - if true arrows are disabled and last item has label with remaining count\n- `thumbnailsAsLinks` | Type: `boolean` | Default value: `false` - enables or disables links on thumbnails\n- `thumbnailsAutoHide` | Type: `boolean` | Default value: `false` - hides thumbnails if there is only one image\n- `thumbnailMargin` | Type: `number` | Default value: `10` - margin between images in thumbnails\n- `thumbnailSize` | Type: `string` | Default value: `NgxGalleryImageSize.Cover` - thumbnail size\n- `thumbnailActions` | Type: `NgxGalleryAction[]` | Default value: `[]` - Array of custom actions\n\n- `preview` | Type: `boolean` | Default value: `true` - enables or disables preview\n- `previewDescription` | Type: `boolean` | Default value: `true` - enables or disables description for images\n- `previewArrows` | Type: `boolean` | Default value: `true` - enables or disables arrows\n- `previewArrowsAutoHide` | boolean: `string` | Default value: `false` - enables or disables arrows auto hide\n- `previewSwipe` | Type: `boolean` | Default value: `false` - enables or disables swipe\n- `previewFullscreen` | Type: `boolean` | Default value: `false` - enables or disables fullscreen icon\n- `previewForceFullscreen` | Type: `boolean` | Default value: `false` - enables or disables opening preview in fullscreen mode\n- `previewCloseOnClick` | Type: `boolean` | Default value: `false` - enables or disables closing preview by click\n- `previewCloseOnEsc` | Type: `boolean` | Default value: `false` - enables or disables closing preview by esc keyboard\n- `previewKeyboardNavigation` | Type: `boolean` | Default value: `false` - enables or disables navigation by keyboard\n- `previewAnimation` | Type: `boolean` | Default value: `true` - enables or disables image loading animation\n- `previewAutoPlay` | Type: `boolean` | Default value `false` - enables or disables auto play\n- `previewAutoPlayInterval` | Type: `number` | Default value: `2000` - interval for auto play (ms)\n- `previewAutoPlayPauseOnHover` | Type: `boolean` | Default value: `false` - enables or disables pouse auto play on hover\n- `previewInfinityMove` | Type: `boolean` | Default value: `false` - enables or disables infinity move by arrows\n- `previewZoom` | Type: `boolean` | Default value: `false` - enables or disables zoom in and zoom out\n- `previewZoomStep` | Type: `number` | Default value: `0.1` - step for zoom change\n- `previewZoomMax` | Type: `number` | Default value: `2` - max value for zoom\n- `previewZoomMin` | Type: `number` | Default value: `0.5` - min value for zoom\n- `previewRotate` | Type: `boolean` | Default value: `false` - enables or disables rotate buttons\n- `previewDownload` | Type: `boolean` | Default value: `false` - enables or disables downoad button\n- `previewBullets` | Type: `boolean` | Default value: `false` - enables or disables navigation bullets\n\n- `arrowPrevIcon` | Type: `string` | Default value: `'fa fa-arrow-circle-left'` - icon for prev arrow\n- `arrowNextIcon` | Type: `string` | Default value: `'fa fa-arrow-circle-right'` - icon for next arrow\n- `closeIcon` | Type: `string` | Default value: `'fa fa-times-circle'` - icon for close button\n- `fullscreenIcon` | Type: `string` | Default value: `'fa fa-arrows-alt'` - icon for fullscreen button\n- `spinnerIcon` | Type: `string` | Default value: `'fa fa-spinner fa-pulse fa-3x fa-fw'` - icon for spinner\n- `zoomInIcon` | Type: `string` | Default value: `'fa fa-search-plus'` - icon for zoom in\n- `zoomOutIcon` | Type: `string` | Default value: `'fa fa-search-minus'` - icon for zoom out\n- `rotateLeftIcon` | Type: `string` | Default value: `'fa fa-undo'` - icon for rotate left\n- `rotateRightIcon` | Type: `string` | Default value: `'fa fa-repeat'` - icon for rotate right\n- `downloadIcon` | Type: `string` | Default value: `'fa fa-arrow-circle-down'` - icon for download\n- `actions` | Type: `NgxGalleryAction[]` | Default value: `[]` - Array of new custom actions that will be added to the left of the current close/zoom/fullscreen icons\n\n# NgxGalleryImage\n- `small` | Type: `string | SafeResourceUrl` - url used in thumbnails\n- `medium` | Type: `string | SafeResourceUrl` - url used in image\n- `big` | Type: `string | SafeResourceUrl` - url used in preview\n- `description` | Type: `string` - description used in preview\n- `url` | Type: `string` - url used in link\n- `label` | Type: `string` - 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\nExamples for \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# Events\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- `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# Usage\n````ts\n// app.module.ts\nimport { NgxGalleryModule } from 'ngx-gallery';\n...\n@NgModule({\n    imports: [\n        ...\n        NgxGalleryModule\n        ...\n    ],\n    ...\n})\nexport class AppModule { }\n````\n\n````ts\n// app.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';\n...\n\n@Component({\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n    galleryOptions: NgxGalleryOptions[];\n    galleryImages: NgxGalleryImage[];\n\n    ngOnInit(): void {\n\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/1-small.jpg',\n                medium: 'assets/1-medium.jpg',\n                big: 'assets/1-big.jpg'\n            },\n            {\n                small: 'assets/2-small.jpg',\n                medium: 'assets/2-medium.jpg',\n                big: 'assets/2-big.jpg'\n            },\n            {\n                small: 'assets/3-small.jpg',\n                medium: 'assets/3-medium.jpg',\n                big: 'assets/3-big.jpg'\n            }\n        ];\n    }\n}\n\n````\n\n````html\n// app.component.html\n\u003cngx-gallery [options]=\"galleryOptions\" [images]=\"galleryImages\"\u003e\u003c/ngx-gallery\u003e\n````\n\n# Styling\n- Active thumbnail\n```\n/deep/ .ngx-gallery-thumbnail.ngx-gallery-active {  \n    /* your styles */\n}\n```\n\n- Arrow\n```\nngx-gallery /deep/ .ngx-gallery-arrow {\n    /* your styles */\n}\n```\n\n- Arrow in particular element\n```\nngx-gallery /deep/ ngx-gallery-image .ngx-gallery-arrow {\n    /* your styles */\n}\nngx-gallery /deep/ ngx-gallery-thumbnails .ngx-gallery-arrow {\n    /* your styles */\n}\nngx-gallery /deep/ ngx-gallery-preview .ngx-gallery-arrow {\n    /* your styles */\n}\n```\n\n# Donate\n\nIf you like my work you can buy me a :beer: or :pizza: [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/galer88)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasz-galka%2Fngx-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasz-galka%2Fngx-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasz-galka%2Fngx-gallery/lists"}