# ionic-img-viewer-fc

> Ionic 2 component providing a Twitter inspired experience to visualize pictures.

Latest version **1.3.11** (published 2018-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ionic-img-viewer-fc
pnpm add ionic-img-viewer-fc
yarn add ionic-img-viewer-fc
bun add ionic-img-viewer-fc
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.11 |
| Published | 2018-02-21 |
| First published | 2018-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 279 |
| Author | Orion Charlier |
| Maintainers | nandofalcao |
| Keywords | ionic2, image, angular2, component |

## Links

- npm: https://www.npmjs.com/package/ionic-img-viewer-fc
- Repository: https://github.com/Riron/ionic-img-viewer
- Homepage: https://github.com/Riron/ionic-img-viewer#readme
- Issues: https://github.com/Riron/ionic-img-viewer/issues
- npm.io page: https://npm.io/package/ionic-img-viewer-fc

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.3.11 (latest) — 2018-02-21
- 1.3.10 — 2018-02-21
- 1.3.9 — 2018-02-21
- 1.3.8 — 2018-02-21
- 1.3.7 — 2018-02-21
- 1.3.6 — 2018-02-21
- 1.3.5 — 2018-02-21
- 1.3.4 — 2018-02-21

## README

# Image viewer for Ionic2

Ionic 2 plugin providing a Twitter inspired experience to visualize pictures.

![Plugin preview](https://raw.githubusercontent.com/riron/ionic-img-viewer/master/demo/img-viewer2.gif)

## Features

- Tap on the pic to see it fullscreen
- Slide up/down to close the view
- Tap on the navigation arrow to close the view
- Double tap / pinch the pic when open to zoom

## Demo

[Demo on Plunkr](http://plnkr.co/edit/8f5MubWSohI3Q9DfKX9S?p=preview)

## Installation

Make sure you have Ionic and Angular installed.

```
npm install --save ionic-img-viewer
```

**For Ionic 2 RC.0 and later:**

```typescript
import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  imports: [
    IonicImageViewerModule
  ]
})
export class AppModule {}
```

## Usage

Add the `imageViewer` property to the pictures.

```html
<img src="IMAGE_URL" imageViewer />
```

If you use thumbnails and want to display bigger images, you can use it like so :

```html
<img src="IMAGE_URL" imageViewer="OTHER_IMAGE_URL" />
```

However, if `OTHER_IMAGE_URL` is not preloaded, the animation might suffer. Indeed there will be no ready image to make the transition (it might blink and you'll not get the smooth transition effet while opening).
So try to cache your image before the call if you use it that way.

# Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md).

Thank you, [contributors]!

[contributors]: https://github.com/Riron/ionic-img-viewer/graphs/contributors

---
_Source: https://npm.io/package/ionic-img-viewer-fc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._