{"id":21064507,"url":"https://github.com/keephacking/ionic-img-viewer2","last_synced_at":"2025-03-14T01:30:11.883Z","repository":{"id":121224066,"uuid":"114763016","full_name":"keephacking/ionic-img-viewer2","owner":"keephacking","description":"Ionic 2+ component providing a Twitter inspired experience to visualize pictures.","archived":false,"fork":false,"pushed_at":"2017-12-19T14:29:25.000Z","size":2942,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-19T17:58:59.390Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/keephacking.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-19T12:32:21.000Z","updated_at":"2017-12-25T19:26:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"91a79f18-1d12-440f-a330-873eb073ef94","html_url":"https://github.com/keephacking/ionic-img-viewer2","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keephacking%2Fionic-img-viewer2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keephacking%2Fionic-img-viewer2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keephacking%2Fionic-img-viewer2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keephacking%2Fionic-img-viewer2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keephacking","download_url":"https://codeload.github.com/keephacking/ionic-img-viewer2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234856240,"owners_count":18897402,"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-11-19T17:49:48.629Z","updated_at":"2025-01-20T20:51:28.387Z","avatar_url":"https://github.com/keephacking.png","language":"TypeScript","readme":"# Image viewer for Ionic 2+\n\n[![NPM](https://nodei.co/npm/ionic-img-viewer.png?downloads=true)](https://nodei.co/npm/ionic-img-viewer/)\n\nIonic 2 plugin providing a Twitter inspired experience to visualize pictures.\n\n![Plugin preview](https://raw.githubusercontent.com/riron/ionic-img-viewer/master/demo/img-viewer2.gif)\n\n## Features\n\n- Tap on the pic to see it fullscreen\n- Slide up/down to close the view\n- Tap on the navigation arrow to close the view\n- Double tap / pinch the pic when open to zoom\n\n## Demo\n\n[Demo on Plunkr](http://embed.plnkr.co/isbTOupNw51JjaaksbSE/)\n\n## Installation\n\nMake sure you have Ionic and Angular installed.\n\n```\nnpm install --save ionic-img-viewer\n```\n\n**Check you peer-dependencies warnings after `npm install` to make sure you are using a version in accordance to your Ionic version.**\n\n### For Ionic 2 RC.0 and later:\n\n```typescript\nimport { IonicImageViewerModule } from 'ionic-img-viewer';\n\n@NgModule({\n  imports: [\n    IonicImageViewerModule\n  ]\n})\nexport class AppModule {}\n```\n\n## Usage\n\n\n### As a directive\n\nAdd the `imageViewer` property to the image element.\n\n```html\n\u003cimg src=\"IMAGE_URL\" imageViewer /\u003e\n```\n\nIf you use thumbnails and want to display bigger images, you can use it like so :\n\n```html\n\u003cimg src=\"IMAGE_URL\" imageViewer=\"OTHER_IMAGE_URL\" /\u003e\n```\n\nHowever, if `OTHER_IMAGE_URL` is not preloaded, the animation might suffer. There will be no loaded image to display in order to have the nice and smooth transition, and you might see the image blinking while opening it.\n\nSo try to cache your image before the call if you use it that way.\n\n### React to close event\n\nIf you need to, you can attach a callback to `close` event, fired right after the image viewer element has been closed :\n\n```html\n\u003cimg src=\"IMAGE_URL\" imageViewer (close)=\"callbackAfterImageViewerCloses()\" /\u003e\n```\n\n### Programmatic usage\n\nIf you don't want to use the directive, you can create an instance of the ImageViewer yourself and trigger the presentation whenever you want.\n\n```html\n\u003cimg src=\"IMAGE_URL\" #myImage (click)=\"presentImage(myImage)\" /\u003e\n```\n\n```typescript\nimport { ImageViewerController } from 'ionic-img-viewer';\n\nexport class MyPage {\n  _imageViewerCtrl: ImageViewerController;\n\n  constructor(imageViewerCtrl: ImageViewerController) {\n    this._imageViewerCtrl = imageViewerCtrl;\n  }\n\n  presentImage(myImage) {\n    const imageViewer = this._imageViewerCtrl.create(myImage);\n    imageViewer.present();\n\n    setTimeout(() =\u003e imageViewer.dismiss(), 1000);\n    imageViewer.onDidDismiss(() =\u003e alert('Viewer dismissed'));\n  }\n}\n```\n\nAs a second argument to the `create(imageElement, config)` method, you can pass an object with the following options.\n\n| Options         | Type     | Description  |\n| --------------- |:---------| :------------|\n| fullResImage    | string   | A full resolution image to display instead of the original image when open. Default to null |\n| onCloseCallback | Function | Function to be called when the ImageViewer quits. Default to null |\n\n# Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md).\n\nThank you, [contributors]!\n\n[contributors]: https://github.com/Riron/ionic-img-viewer/graphs/contributors\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeephacking%2Fionic-img-viewer2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeephacking%2Fionic-img-viewer2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeephacking%2Fionic-img-viewer2/lists"}