{"id":28067625,"url":"https://github.com/sanjayv/ng-image-fullscreen-viewer","last_synced_at":"2025-10-15T21:22:28.544Z","repository":{"id":37798155,"uuid":"218708344","full_name":"sanjayV/ng-image-fullscreen-viewer","owner":"sanjayV","description":"An Angular responsive image fullscreen viewer. Also support youtube and mp4 video urls.","archived":false,"fork":false,"pushed_at":"2023-02-04T13:15:07.000Z","size":13880,"stargazers_count":24,"open_issues_count":19,"forks_count":25,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-10T08:49:01.724Z","etag":null,"topics":["angular","fullscreen-images","image-viewer","responsive-images","video-viewer"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/sanjayV.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}},"created_at":"2019-10-31T07:27:06.000Z","updated_at":"2024-12-23T01:04:06.000Z","dependencies_parsed_at":"2023-02-07T03:31:51.502Z","dependency_job_id":null,"html_url":"https://github.com/sanjayV/ng-image-fullscreen-viewer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-fullscreen-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-fullscreen-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-fullscreen-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-fullscreen-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanjayV","download_url":"https://codeload.github.com/sanjayV/ng-image-fullscreen-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253784645,"owners_count":21963895,"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","fullscreen-images","image-viewer","responsive-images","video-viewer"],"created_at":"2025-05-12T16:58:37.392Z","updated_at":"2025-10-15T21:22:28.456Z","avatar_url":"https://github.com/sanjayV.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Image Fullscreen Viewer\n\nAn Angular responsive image fullscreen viewer.\nAlso support youtube and mp4 video urls.\n\n(Compatible with Angular Version: 11)\n\n## Features!\n\n  - Responsive\n  - captures swipes from phones and tablets\n  - Compatible with Angular Universal\n  - captures keyboard next/previous arrow key event for lightbox image move\n  - Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)\n\n### Working Demo: https://angular-bkosu5.stackblitz.io/\n### Code example: https://stackblitz.com/edit/angular-bkosu5\n\n\n# Installation\n`npm install ng-image-fullscreen-view`\n\n# Setup :\n\n**Import module in your `app.module.ts`:**\n```typescript\nimport { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';\n...\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        NgImageFullscreenViewModule,\n        ...\n    ],\n    providers: [],\n    bootstrap: [AppComponent]\n})\n\nexport class AppModule {\n}\n\n```\n\n**Add component in your template file :**\n```html\n\u003cimg src=\"path-of-image.jpg\" (click)=\"showLightbox(0)\" /\u003e\n\n\u003cng-image-fullscreen-view\n    [images]=\"imageObject\"\n    [imageIndex]=\"selectedImageIndex\"\n    [show]=\"showFlag\"\n    (close)=\"closeEventHandler()\"\u003e\u003c/ng-image-fullscreen-view\u003e\n```\n\n**Add closeEventHanler and showFlag conditions in `your.component.ts` :**\n```typescript\nexport class AppComponent {\n    showFlag: boolean = false;\n    selectedImageIndex: number = -1;\n\n    constructor () {}\n\n    ...\n\n    showLightbox(index) {\n        this.selectedImageIndex = index;\n        this.showFlag = true;\n    }\n\n    closeEventHandler() {\n        this.showFlag = false;\n        this.currentIndex = -1;\n    }\n\n    ...\n}\n\n```\n\n**ImageObject format**\n```js\nimageObject: Array\u003cobject\u003e = [{\n        image: 'assets/img/slider/1.jpg',\n    }, {\n        image: 'assets/img/slider/1.jpg',\n        alt: 'alt of image', // Optional\n        title: 'title of image' // Optional: Show image with description text\n    }, {\n        image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image\n        title: 'Image title', //Optional: You can use this key if want to show image with title\n        alt: 'Image alt' //Optional: You can use this key if want to show image with alt\n    }\n];\n```\n\n**Image, Youtube and MP4 url's object format**\n ```js\nimageObject: Array\u003cobject\u003e = [{\n        video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url\n    },\n\t{\n\t\tvideo: 'assets/video/movie.mp4', // MP4 Video url\n\t},\n\t{\n\t\tvideo: 'assets/video/movie2.mp4',\n        title: 'Image title' // Video with title\n    },\n\t{\n\t\timage: 'assets/img/slider/1.jpg',\n        alt: 'Image alt'\n\t}\n    ...\n];\n```\n\n## API Reference (optional) :\n\n| Name | Type | Data Type | Description | Default |\n|------|------|-----------|-------------|---------|\n| images | @Input  | Array   | Images array. |  |\n| imageIndex | @Input  | number   | Selected image index. | 0 |\n| show | @Input  | boolean   | Image fullscreen popup visiable flag. | false |\n| infinite | @Input  | boolean   | Infinite sliding images if value is **true**. | false |\n| videoAutoPlay | @Input | boolean | Auto play popup video | false |\n| showVideoControls | @Input | boolean | Hide Youtube and MP4 video controls if value is `false` | true |\n| direction | @Input | string | Set text direction. You can pass **rtl** / **ltr** / **auto** | ltr |\n| paginationShow | @Input  | boolean | Display pagination at bottom. | false |\n| animationSpeed | @Input  | number | By this user can set slider animation speed. Minimum value is **0.1 second** and Maximum value is **5 second**. | 1 |\n| arrowKeyMove | @Input | boolean | Disable slider and popup image left/right move on arrow key press event, if value is `false`  | true |\n| close | @Output | n/a | Executes when click on close. | n/a |\n| prevImage | @Output | n/a | Executes when click on previous arrow. | n/a |\n| nextImage | @Output | n/a | Executes when click on next arrow. | n/a |\n\n## License\nAs Angular itself, this module is released under the permissive [MIT license](http://revolunet.mit-license.org).\n\nYour contributions and suggestions are always welcome :)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanjayv%2Fng-image-fullscreen-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanjayv%2Fng-image-fullscreen-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanjayv%2Fng-image-fullscreen-viewer/lists"}