CODEWITHSUNDEEP
javascriptangulartypescriptmobileionic2
Rookie
Rookie

Reputation: 193

Turn.js like flipbook for ionic 2

I've searced all around the internet for a flipbook plugin for ionic 2 but failed to find one. I later tried to include javascript flipbook plugins as external libraries but failed everytime. Is there any npm flipbook packages out there? If there are no, how can I include a javascript plugin in my ionic 2 projects?

Upvotes: 2

Views: 1537

Answers (1)

Diego Nobre
Diego Nobre

Reputation: 31

"Is there any npm flipbook packages out there?" You can try this repository: https://www.npmjs.com/package/angular-turnjs

"how can I include a javascript plugin in my ionic 2 projects?"

I choose to implement TurnJS importing as external library. You can clone a working version using Ionic 3 here: https://github.com/diegonobre/ionic-turnjs

If you want to implement your own version, follow below instructions:

Create ionic project usign Ionic CLI

ionic start ionic-turnjs blank

Add jQuery and TurnJS

  • Copy jQuery and TurnJS libs to your src/assets folder

  • Edit your src/index.html to add the above code before the </head> tag

Replace home.ts with the above code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

declare var $:any;

@Component({
selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(
        public navCtrl: NavController,
        public platform: Platform
    ) {}

    ionViewDidLoad() {
        $("#flipbook").turn({
            width: '100%',
            height: this.platform.height() - 50,
            display: 'single',
            autoCenter: true
        });
    }
}

Create your TurnJS view

<ion-content>
    <div id="flipbook">
        <div class="cover"> Turn.js </div>
        <div class="page"> Page 1 </div>
        <div class="page"> Page 2 </div>
        <div class="page"> Page 3 </div>
        <div class="page"> Page 4 </div>
        <div class="cover"> The end </div>
    </div>
</ion-content>

Add CSS to home.scss

page-home {
    .cover {
        overflow:hidden;
        background-color: lightgray;
        border: solid 1px black;
    }
    .page {
        overflow:hidden;
        background-color: white;
        border: solid 1px gray;
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        line-height: 100px;
    }
}

Upvotes: 3

Related Questions