Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@idmadj/ionic-img-viewer
Advanced tools
Readme
Ionic 2 plugin providing a Twitter inspired experience to visualize pictures.
Make sure you have Ionic and Angular installed.
npm install --save ionic-img-viewer
Check you peer-dependencies warnings after npm install
to make sure you are using a version in accordance to your Ionic version.
import { IonicImageViewerModule } from 'ionic-img-viewer';
@NgModule({
imports: [
IonicImageViewerModule
]
})
export class AppModule {}
Add the imageViewer
property to the image element.
<img src="IMAGE_URL" imageViewer />
If you use thumbnails and want to display bigger images, you can use it like so :
<img src="IMAGE_URL" imageViewer="OTHER_IMAGE_URL" />
However, 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.
So try to cache your image before the call if you use it that way.
If you need to, you can attach a callback to close
event, fired right after the image viewer element has been closed :
<img src="IMAGE_URL" imageViewer (close)="callbackAfterImageViewerCloses()" />
If you don't want to use the directive, you can create an instance of the ImageViewer yourself and trigger the presentation whenever you want.
<img src="IMAGE_URL" #myImage (click)="presentImage(myImage)" />
import { ImageViewerController } from 'ionic-img-viewer';
export class MyPage {
_imageViewerCtrl: ImageViewerController;
constructor(imageViewerCtrl: ImageViewerController) {
this._imageViewerCtrl = imageViewerCtrl;
}
presentImage(myImage) {
const imageViewer = this._imageViewerCtrl.create(myImage);
imageViewer.present();
setTimeout(() => imageViewer.dismiss(), 1000);
imageViewer.onDidDismiss(() => alert('Viewer dismissed'));
}
}
As a second argument to the create(imageElement, config)
method, you can pass an object with the following options.
Options | Type | Description |
---|---|---|
fullResImage | string | A full resolution image to display instead of the original image when open. Defaults to null |
onCloseCallback | Function | Function to be called when the ImageViewer quits. Defaults to null |
enableBackdropDismiss | boolean | Boolean to enable dismiss when clicking on the back drop. Defaults to false |
See CONTRIBUTING.md.
Thank you, contributors!
FAQs
Ionic 2 component providing a Twitter inspired experience to visualize pictures.
The npm package @idmadj/ionic-img-viewer receives a total of 4 weekly downloads. As such, @idmadj/ionic-img-viewer popularity was classified as not popular.
We found that @idmadj/ionic-img-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.