Git Product home page Git Product logo

ionic-img-viewer's Introduction

Image viewer for Ionic2

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

For Ionic 2 RC.0 and later:

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

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

Usage

Add the imageViewer property to the pictures.

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

Thank you, contributors!

ionic-img-viewer's People

Contributors

cupidi avatar dmastag avatar riron avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.