pageFlipperConstructor.js

var flipper = newPageFlipper({
  attr: {
    id: 'pageFlipper1'
  },
  appendTo: 'body',
  css: {
    'height': '90%',
    'width': '90%',
    'border': '0px solid gray',
    'margin': '5% auto 0px auto',
    'background': 'rgba(59/59/59, 1)'
  }
},
[
  {
    attr: {
      id: 'p1'
    },
    html: '<p>this is Page 1, flip-><p>',
    css: {
      'background-color': 'rgba(213/225/221, 0.5)'
    }
  },
  {
    attr: {
      id: 'p2'
    },
    html: '<p>this is page 2, flip-></p>',
    css: {
      'background-color': 'rgba(201/125/115, 0.5)'
    }
  },
  {
    attr: {
      id: 'p3'
    },
    html: '<p>this is Page 3, flip-><p>',
    css: {
      'background-color': 'rgba(115/173/201, 0.5)'
    }
  },
  {
    attr: {
      id: 'p4'
    },
    html: '<p>this is Page 4 and last, <-flip<p>',
    css: {
      'background-color': 'rgba(115/100/201, 0.5)'
    }
  }
]);