{"_id":"@aloysius-software-factory/ng-image-fullscreen-view","_rev":"2-b8d5952fa553ff151f192bec38c962f6","name":"@aloysius-software-factory/ng-image-fullscreen-view","dist-tags":{"latest":"20.0.0"},"versions":{"13.0.0":{"name":"@aloysius-software-factory/ng-image-fullscreen-view","version":"13.0.0","keywords":["Angular","Image full screen popup","Image popup","responsive Angular image view","responsive slider","image viewer"],"author":{"name":"Sanjay V","email":"skumarverma45@gmail.com"},"license":"MIT","_id":"@aloysius-software-factory/ng-image-fullscreen-view@13.0.0","maintainers":[{"name":"aloysius-software-factory","email":"aloysiusgrd@gmail.com"}],"homepage":"https://github.com/sanjayV/ng-image-fullscreen-viewer","bugs":{"url":"https://github.com/sanjayV/ng-image-fullscreen-viewer/issues"},"dist":{"shasum":"d6b49378442b821da9c2e11ee8149934f2318bd1","tarball":"https://registry.npmjs.org/@aloysius-software-factory/ng-image-fullscreen-view/-/ng-image-fullscreen-view-13.0.0.tgz","fileCount":18,"integrity":"sha512-UAZfHARVBbDTNX/5dKHhQzu0/3QueIE1hoVc95bS9Nd6fmvaeiMxP9oA5CObxdZfpUBXuI1mzfWqe/GxdppVkg==","signatures":[{"sig":"MEUCICNc+cCdGvhArw9SIubzlY0JXXA2lQPJCMR4GHhuBnGSAiEAwdU5QXMaRL2OnxAHzKTp69VRhFq/MQ+Fe1MiylcbnFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkB+4rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrifg//dvWcqm7Yn1DQFqqVcPb/yRHo0CR6g2HMQ6PfZokPoHKLKofS\r\nUB3O7n4q/s5F2RirqeJfVDKbT6G9njAws4HYeVXxHTtqkCO1IILlwupE2jzA\r\nMP/INHJyIDCodeSa4k8hQU9ljspt1BildCKVq8eFWcNlLhfYEWZys3y5SL0i\r\nY+YK6i6vTWEVvckoXXnjpoFAjoh9RbCI62Nel/tAKAMk6cvcDncyBLJQnhov\r\nb66xBQlmp8jlsrVX/S29WJnTxWUAA5IzVNDURkFKcSZpNj9YdS8aCagragnG\r\nlkl/X3r7TfvZMUOts+aEDoYBhJkwUnnCdLiA4/92l1CYgH6JeW6TNrKtx1EE\r\nDV7wc97y9Rh5/z1/iq1h5o2PDL8hB68O8w0Otth3Tfp/htrP5FwCSgsebXYC\r\nzOQiiQzvYvxfWCmDgZ5jygCmZsKplHRxVZvWh+ordvN+EOnHUws317LJxBge\r\n/y26vo531+ePLiBOFhFCqVZ2Vu3csrP3FPtmg49SaokQ9lS0sKFk2sO0PUrX\r\nrN0xGVwYfljb4AxO6k8UJNYpbi9LLK0a45LPusk5fR4o/eWlvH3LnH8D4+Ji\r\nE72gdkw441IduSjEgh9RsWWEX/D/mx6rcuuzfIPMx4+bJt3rfgUM0vkxnzbp\r\nMltHP67IZ9F0z+RroaUFbuy6996NuHmT7q0=\r\n=jQ6l\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","module":"fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","esm2020":"esm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","exports":{".":{"node":"./fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","types":"./aloysius-software-factory-ng-image-fullscreen-view.d.ts","es2015":"./fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","es2020":"./fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","default":"./fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","esm2020":"./esm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f86a2d27a02d40cfc26f66fd4563122fe037daa9","typings":"aloysius-software-factory-ng-image-fullscreen-view.d.ts","_npmUser":{"name":"aloysius-software-factory","email":"aloysiusgrd@gmail.com"},"fesm2015":"fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","fesm2020":"fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","repository":{"url":"git+https://github.com/sanjayV/ng-image-fullscreen-viewer.git","type":"git"},"_npmVersion":"9.3.1","description":"An Angular responsive image full screen viewer. Also support youtube and mp4 video urls, captures swipes from phones and tablets, Compatible with Angular Universal, Captures keyboard next/previous arrow.","directories":{},"sideEffects":false,"_nodeVersion":"18.14.0","dependencies":{"tslib":"^2.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^13.3.12","@angular/common":"^13.3.12"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-fullscreen-view_13.0.0_1678241322866_0.8648868287939766","host":"s3://npm-registry-packages"}},"20.0.0":{"name":"@aloysius-software-factory/ng-image-fullscreen-view","version":"20.0.0","description":"An Angular responsive image full screen viewer. Also support youtube and mp4 video urls, captures swipes from phones and tablets, Compatible with Angular Universal, Captures keyboard next/previous arrow.","peerDependencies":{"@angular/common":"^20.3.0","@angular/core":"^20.3.0"},"keywords":["Angular","Image full screen popup","Image popup","responsive Angular image view","responsive slider","image viewer"],"author":{"name":"Sanjay V","email":"skumarverma45@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/sanjayV/ng-image-fullscreen-viewer.git"},"homepage":"https://github.com/sanjayV/ng-image-fullscreen-viewer","dependencies":{"tslib":"^2.4.0"},"bugs":{"url":"https://github.com/sanjayV/ng-image-fullscreen-viewer/issues"},"module":"fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","es2020":"fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","esm2020":"esm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","fesm2020":"fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","fesm2015":"fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","typings":"aloysius-software-factory-ng-image-fullscreen-view.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./aloysius-software-factory-ng-image-fullscreen-view.d.ts","esm2020":"./esm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","es2020":"./fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs","es2015":"./fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","node":"./fesm2015/aloysius-software-factory-ng-image-fullscreen-view.mjs","default":"./fesm2020/aloysius-software-factory-ng-image-fullscreen-view.mjs"}},"sideEffects":false,"gitHead":"8da93b93a36d2ec1119eea49244d656234c7036d","_id":"@aloysius-software-factory/ng-image-fullscreen-view@20.0.0","_nodeVersion":"24.11.1","_npmVersion":"11.6.4","dist":{"integrity":"sha512-G8LfmxRGNsPgUKDrqQEL9tvqWmi7e+A8yqvW580sUFOZw2tbH3n4jaP8z4uCTwICvdoQrWB6y3Ny9/YU7SGRHg==","shasum":"7d801b0a0f440e032be16d515198757af6fa0c85","tarball":"https://registry.npmjs.org/@aloysius-software-factory/ng-image-fullscreen-view/-/ng-image-fullscreen-view-20.0.0.tgz","fileCount":20,"unpackedSize":350240,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF+0V8prs2VF6JKupRN/2ErP3apaHy8fWSL8QBVz2s8fAiBhOM7TjjZEWR1O6MJlFbkdS4+TS2ccuUjrXU1U9gjNQQ=="}]},"_npmUser":{"name":"aloysius-software-factory","email":"aloysiusgrd@gmail.com"},"directories":{},"maintainers":[{"name":"aloysius-software-factory","email":"aloysiusgrd@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-image-fullscreen-view_20.0.0_1764775387710_0.790072752241098"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-08T02:08:42.793Z","modified":"2025-12-03T15:23:08.086Z","13.0.0":"2023-03-08T02:08:43.038Z","20.0.0":"2025-12-03T15:23:07.903Z"},"bugs":{"url":"https://github.com/sanjayV/ng-image-fullscreen-viewer/issues"},"author":{"name":"Sanjay V","email":"skumarverma45@gmail.com"},"license":"MIT","homepage":"https://github.com/sanjayV/ng-image-fullscreen-viewer","keywords":["Angular","Image full screen popup","Image popup","responsive Angular image view","responsive slider","image viewer"],"repository":{"type":"git","url":"git+https://github.com/sanjayV/ng-image-fullscreen-viewer.git"},"description":"An Angular responsive image full screen viewer. Also support youtube and mp4 video urls, captures swipes from phones and tablets, Compatible with Angular Universal, Captures keyboard next/previous arrow.","maintainers":[{"name":"aloysius-software-factory","email":"aloysiusgrd@gmail.com"}],"readme":"# Angular Image Fullscreen Viewer\r\n\r\nAn Angular responsive image fullscreen viewer.\r\nAlso support youtube and mp4 video urls.\r\n\r\n(Compatible with Angular Version: 11)\r\n\r\n## Features!\r\n\r\n  - Responsive\r\n  - captures swipes from phones and tablets\r\n  - Compatible with Angular Universal\r\n  - captures keyboard next/previous arrow key event for lightbox image move\r\n  - Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)\r\n\r\n### Working Demo: https://angular-bkosu5.stackblitz.io/\r\n### Code example: https://stackblitz.com/edit/angular-bkosu5\r\n\r\n\r\n# Installation\r\n`npm install ng-image-fullscreen-view`\r\n\r\n# Setup :\r\n\r\n**Import module in your `app.module.ts`:**\r\n```typescript\r\nimport { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';\r\n...\r\n\r\n@NgModule({\r\n    declarations: [\r\n        AppComponent\r\n    ],\r\n    imports: [\r\n        NgImageFullscreenViewModule,\r\n        ...\r\n    ],\r\n    providers: [],\r\n    bootstrap: [AppComponent]\r\n})\r\n\r\nexport class AppModule {\r\n}\r\n\r\n```\r\n\r\n**Add component in your template file :**\r\n```html\r\n<img src=\"path-of-image.jpg\" (click)=\"showLightbox(0)\" />\r\n\r\n<ng-image-fullscreen-view\r\n    [images]=\"imageObject\"\r\n    [imageIndex]=\"selectedImageIndex\"\r\n    [show]=\"showFlag\"\r\n    (close)=\"closeEventHandler()\"></ng-image-fullscreen-view>\r\n```\r\n\r\n**Add closeEventHanler and showFlag conditions in `your.component.ts` :**\r\n```typescript\r\nexport class AppComponent {\r\n    showFlag: boolean = false;\r\n    selectedImageIndex: number = -1;\r\n\r\n    constructor () {}\r\n\r\n    ...\r\n\r\n    showLightbox(index) {\r\n        this.selectedImageIndex = index;\r\n        this.showFlag = true;\r\n    }\r\n\r\n    closeEventHandler() {\r\n        this.showFlag = false;\r\n        this.currentIndex = -1;\r\n    }\r\n\r\n    ...\r\n}\r\n\r\n```\r\n\r\n**ImageObject format**\r\n```js\r\nimageObject: Array<object> = [{\r\n        image: 'assets/img/slider/1.jpg',\r\n    }, {\r\n        image: 'assets/img/slider/1.jpg',\r\n        alt: 'alt of image', // Optional\r\n        title: 'title of image' // Optional: Show image with description text\r\n    }, {\r\n        image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image\r\n        title: 'Image title', //Optional: You can use this key if want to show image with title\r\n        alt: 'Image alt' //Optional: You can use this key if want to show image with alt\r\n    }\r\n];\r\n```\r\n\r\n**Image, Youtube and MP4 url's object format**\r\n ```js\r\nimageObject: Array<object> = [{\r\n        video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url\r\n    },\r\n\t{\r\n\t\tvideo: 'assets/video/movie.mp4', // MP4 Video url\r\n\t},\r\n\t{\r\n\t\tvideo: 'assets/video/movie2.mp4',\r\n        title: 'Image title' // Video with title\r\n    },\r\n\t{\r\n\t\timage: 'assets/img/slider/1.jpg',\r\n        alt: 'Image alt'\r\n\t}\r\n    ...\r\n];\r\n```\r\n\r\n## API Reference (optional) :\r\n\r\n| Name | Type | Data Type | Description | Default |\r\n|------|------|-----------|-------------|---------|\r\n| images | @Input  | Array   | Images array. |  |\r\n| imageIndex | @Input  | number   | Selected image index. | 0 |\r\n| show | @Input  | boolean   | Image fullscreen popup visiable flag. | false |\r\n| infinite | @Input  | boolean   | Infinite sliding images if value is **true**. | false |\r\n| videoAutoPlay | @Input | boolean | Auto play popup video | false |\r\n| showVideoControls | @Input | boolean | Hide Youtube and MP4 video controls if value is `false` | true |\r\n| direction | @Input | string | Set text direction. You can pass **rtl** / **ltr** / **auto** | ltr |\r\n| paginationShow | @Input  | boolean | Display pagination at bottom. | false |\r\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 |\r\n| arrowKeyMove | @Input | boolean | Disable slider and popup image left/right move on arrow key press event, if value is `false`  | true |\r\n| close | @Output | n/a | Executes when click on close. | n/a |\r\n| prevImage | @Output | n/a | Executes when click on previous arrow. | n/a |\r\n| nextImage | @Output | n/a | Executes when click on next arrow. | n/a |\r\n\r\n## License\r\nAs Angular itself, this module is released under the permissive [MIT license](http://revolunet.mit-license.org).\r\n\r\nYour contributions and suggestions are always welcome :)","readmeFilename":"README.md"}