npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@idmadj/ionic-img-viewer

v2.9.4

Published

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

Downloads

11

Readme

Image viewer for Ionic 2+

NPM

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

Plugin preview

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

Installation

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.

For Ionic 2 RC.0 and later:

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

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

Usage

As a directive

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.

React to close event

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()" />

Programmatic usage

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 |

Contributing

See CONTRIBUTING.md.

Thank you, contributors!