# ng-image-fullscreen-view

> 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.

Latest version **3.0.3** (published 2022-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-image-fullscreen-view
pnpm add ng-image-fullscreen-view
yarn add ng-image-fullscreen-view
bun add ng-image-fullscreen-view
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2022-06-18 |
| First published | 2020-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 317.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Sanjay V |
| Maintainers | svrm |
| Keywords | Angular, Image full screen popup, Image popup, responsive Angular image view, responsive slider, image viewer |

## Links

- npm: https://www.npmjs.com/package/ng-image-fullscreen-view
- Repository: https://github.com/sanjayV/ng-image-fullscreen-viewer
- Issues: https://github.com/sanjayV/ng-image-fullscreen-viewer/issues
- npm.io page: https://npm.io/package/ng-image-fullscreen-view

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 3.0.3 (latest) — 2022-06-18
- 3.0.2 — 2022-06-18
- 3.0.1 — 2022-06-17
- 3.0.0 — 2022-06-17
- 2.0.0 — 2020-10-15
- 1.0.3 — 2020-03-11
- 1.0.2 — 2020-01-21
- 1.0.1 — 2020-01-20
- 1.0.0 — 2020-01-19

## README

# Angular Image Fullscreen Viewer

An Angular responsive image fullscreen viewer.
Also support youtube and mp4 video urls.

(Compatible with Angular Version: 11)

## Features!

  - Responsive
  - captures swipes from phones and tablets
  - Compatible with Angular Universal
  - captures keyboard next/previous arrow key event for lightbox image move
  - Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)

### Working Demo: https://angular-bkosu5.stackblitz.io/
### Code example: https://stackblitz.com/edit/angular-bkosu5


# Installation
`npm install ng-image-fullscreen-view`

# Setup :

**Import module in your `app.module.ts`:**
```typescript
import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';
...

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgImageFullscreenViewModule,
        ...
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {
}

```

**Add component in your template file :**
```html
<img src="path-of-image.jpg" (click)="showLightbox(0)" />

<ng-image-fullscreen-view
    [images]="imageObject"
    [imageIndex]="selectedImageIndex"
    [show]="showFlag"
    (close)="closeEventHandler()"></ng-image-fullscreen-view>
```

**Add closeEventHanler and showFlag conditions in `your.component.ts` :**
```typescript
export class AppComponent {
    showFlag: boolean = false;
    selectedImageIndex: number = -1;

    constructor () {}

    ...

    showLightbox(index) {
        this.selectedImageIndex = index;
        this.showFlag = true;
    }

    closeEventHandler() {
        this.showFlag = false;
        this.currentIndex = -1;
    }

    ...
}

```

**ImageObject format**
```js
imageObject: Array<object> = [{
        image: 'assets/img/slider/1.jpg',
    }, {
        image: 'assets/img/slider/1.jpg',
        alt: 'alt of image', // Optional
        title: 'title of image' // Optional: Show image with description text
    }, {
        image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image
        title: 'Image title', //Optional: You can use this key if want to show image with title
        alt: 'Image alt' //Optional: You can use this key if want to show image with alt
    }
];
```

**Image, Youtube and MP4 url's object format**
 ```js
imageObject: Array<object> = [{
        video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url
    },
	{
		video: 'assets/video/movie.mp4', // MP4 Video url
	},
	{
		video: 'assets/video/movie2.mp4',
        title: 'Image title' // Video with title
    },
	{
		image: 'assets/img/slider/1.jpg',
        alt: 'Image alt'
	}
    ...
];
```

## API Reference (optional) :

| Name | Type | Data Type | Description | Default |
|------|------|-----------|-------------|---------|
| images | @Input  | Array   | Images array. |  |
| imageIndex | @Input  | number   | Selected image index. | 0 |
| show | @Input  | boolean   | Image fullscreen popup visiable flag. | false |
| infinite | @Input  | boolean   | Infinite sliding images if value is **true**. | false |
| videoAutoPlay | @Input | boolean | Auto play popup video | false |
| showVideoControls | @Input | boolean | Hide Youtube and MP4 video controls if value is `false` | true |
| direction | @Input | string | Set text direction. You can pass **rtl** / **ltr** / **auto** | ltr |
| paginationShow | @Input  | boolean | Display pagination at bottom. | false |
| animationSpeed | @Input  | number | By this user can set slider animation speed. Minimum value is **0.1 second** and Maximum value is **5 second**. | 1 |
| arrowKeyMove | @Input | boolean | Disable slider and popup image left/right move on arrow key press event, if value is `false`  | true |
| close | @Output | n/a | Executes when click on close. | n/a |
| prevImage | @Output | n/a | Executes when click on previous arrow. | n/a |
| nextImage | @Output | n/a | Executes when click on next arrow. | n/a |

## License
As Angular itself, this module is released under the permissive [MIT license](http://revolunet.mit-license.org).

Your contributions and suggestions are always welcome :)

---
_Source: https://npm.io/package/ng-image-fullscreen-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._