{"id":13535441,"url":"https://github.com/bergben/ng2-image-gallery","last_synced_at":"2025-04-02T01:30:50.260Z","repository":{"id":77982023,"uuid":"76812795","full_name":"bergben/ng2-image-gallery","owner":"bergben","description":"Basic Angular 2 image gallery","archived":true,"fork":false,"pushed_at":"2018-07-12T16:55:41.000Z","size":94,"stargazers_count":19,"open_issues_count":3,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-21T02:03:18.313Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/bergben.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}},"created_at":"2016-12-18T23:27:21.000Z","updated_at":"2023-01-28T08:22:30.000Z","dependencies_parsed_at":"2023-02-26T07:15:40.541Z","dependency_job_id":null,"html_url":"https://github.com/bergben/ng2-image-gallery","commit_stats":{"total_commits":50,"total_committers":4,"mean_commits":12.5,"dds":0.06000000000000005,"last_synced_commit":"cd500a61da9c59bf63540ab4e0d6896bd38759fb"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bergben","download_url":"https://codeload.github.com/bergben/ng2-image-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738430,"owners_count":20825779,"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":[],"created_at":"2024-08-01T08:00:56.280Z","updated_at":"2025-04-02T01:30:50.005Z","avatar_url":"https://github.com/bergben.png","language":"CSS","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"[![Join the chat at https://gitter.im/bergben/bergben](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/bergben/bergben?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n# Not actively maintained anymore\nUnfortunately I don't have time to actively maintain my open source repos anymore. If anyone wants to take over, feel free to contact me, I'd be happy if this project still finds use. \n\n# ng2-image-gallery\nBasic Angular 2 / 4 image gallery. \u003cbr /\u003e\nFor compatibility with Angular 5 this issue would have to be resolved: https://github.com/bergben/ng2-image-gallery/issues/9\n\n## Demo\nA simple demo is available as a plnkr: http://plnkr.co/edit/Qyg5m7XsiKCBpqa6I4ku?p=preview\n\n## Install\n```bash\n$ npm install ng2-image-gallery --save\n```\n\n### Import the module\n```TypeScript\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { Ng2ImageGalleryModule } from 'ng2-image-gallery'; // \u003c-- import the module\nimport { MyComponent } from './my.component';\n\n@NgModule({\n    imports: [BrowserModule,\n              Ng2ImageGalleryModule // \u003c-- include it in your app module\n             ],\n    declarations: [MyComponent],  \n    bootstrap: [MyComponent]\n})\nexport class MyAppModule {}\n```\n### Import the styles\nThis library uses \u003ca href=\"https://v4-alpha.getbootstrap.com/getting-started/download/#package-managers\"\u003eBootstrap 4\u003c/a\u003e, so make sure to install that if you want the default styling to apply. \n\nIf you use Sass / Scss you can import the styles like so:\n```\n@import \"{}/node_modules/ng2-image-gallery/ng2-image-gallery.scss\";\n```\nalternatively just include the css file like this:\n``` \n\u003clink href=\"node_modules/ng2-image-gallery/ng2-image-gallery.css\" rel=\"stylesheet\" /\u003e\n```\n## Usage\n\n### Use it in your template\n```html\n\u003cng2-image-gallery [images]=\"myImages\"\u003e\u003c/ng2-image-gallery\u003e \n```\n\nwhereas \"myImages\" is an Array of objects that by default would have the following properties:\n```TypeScript\nexport interface ImageInterface {\n    thumbnail?: any; //image src for the thumbnail\n    image?: any; //image src for the image \n    text?: string; //optional text to show for the image\n    [propName: string]: any;\n}\n```\n\nYou can, as it might be more comfortable for you because you have different naming for your properties already, provide different naming for the properties like so:\n\n```html\n\u003cng2-image-gallery [images]=\"myImages\" [asText]=\"'content'\" [asThumbnail]=\"'mythumb'\"\u003e\u003c/ng2-image-gallery\u003e \n```\n\n### User interaction\n\nYou can also add some user interaction to the image by simply providing an actionText.\n```html\n\u003cng2-image-gallery [images]=\"myImages\" [actionText]=\"'do something!'\" (onAction)=\"doSomething($event)\"\u003e\u003c/ng2-image-gallery\u003e \n```\nYou can then style the button and listen to the onAction output event.\n\n### Draggable / sortable\n\nFor administration purposes it might be useful to make the thumbnails draggable so that you can change the order of images in a gallery. Simply set `draggable=\"true\"` to do so.\n```html\n\u003cng2-image-gallery [images]=\"myImages\" [draggable]=\"true\" (onDrop)=\"onDrop($event)\"\u003e\u003c/ng2-image-gallery\u003e \n```\nYou can listen to the onDrop event, which will have a property `images` which contains the images in the current order.\n\n## Contribute\nIt would be awesome if someone had the time to make some improvements, like:\n - animations\n - limit to show only 10 thumbnails and then \"+x more\" etc. \n - allow usage of keys\n\nPull requests are much appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbergben%2Fng2-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbergben%2Fng2-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbergben%2Fng2-image-gallery/lists"}