Flipbook is not displaying and shows error

Question

Functionality:

User is able to navigate around the flipbook and when exit the flipbook is able to re-enter the flipbook from the menu and continue to navigate through the flipbook; the flipbook will reset to the first page everytime the user enters the flipbook from the main menu.

What has been done:

Made a flipbook from the plugin turnjs. I have additionally added in a back button that allows user to exit the flipbook to the menu as well as navigational buttons in the flipbook that allows user to navigate the flipbook.

Issue:

When user re-enters the flipbook, the pages are blank and I am unable to flip the flipbook, however for instances that I was able to flip, the pages of the flipbook are still blank. When debugged, the following error is shown:

turn.js:1260 Uncaught TypeError: Cannot read property 'data' of undefined whereby the following line in turn.js is highlighted in asterisks :

var optsCorners = data.opts.turnCorners.split(','),
  ***flipData = data.pages[current].data().f,***
  opts = flipData.opts,
  actualPoint = flipData.point;

Hence, I would like to ask on how to rectify the issue. Any help is much appreciated. thanks

Code:

function Models() {
  console.log("Models");

  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    autoCenter: false,

  });
}

function PreviousPage() {
  console.log("LifeStories");

  $("#Model_flipbook").load("Stories.html #Models_Page");

  $('#Button3').toggle("drop", {
    duration: slideDuration
  }, {
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#Models_Page').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Models_Page').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#1_Page').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#1_Page').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });
}

#Button3 {
  position: absolute;
  top: 400px;
  left: 1520px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#LeftSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 0px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#RightSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 1691px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#PageBack {
  position: absolute;
  top: 970px;
  left: 50px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}

<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; ">

  <button id="LeftSide" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="RightSide" onclick="NextSlide()">
    <img src="lib/img/RightSide.png">
  </button>

  <!--Div part for keynote images-->
  <div id="Model_flipbook" style="position:absolute;">
    <div id="Model_flip_1">
      <img src="lib/img/RoleModel(KeyNote)/RoleModel(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)/Model(KeyNote)_2.jpeg" />
    </div>
    <button id="PageBack" onclick="PreviousPage()">
      <img src="lib/img/VideoBackButton.png">
    </button>
  </div>

Hence, how am I able to rectify the following issue and also that when user re-enters the flipbook after one exit, the flipbook will reset to the first page?

Flipbook is not displaying and shows error

0 Answers0