3D FlipBook - Single page view by default

Figured it out, second line should be

controlsProps: { actions: {cmdSinglePage: {active: true}} },

Dont forget the comma at the end!

{

  $('#container').FlipBook({

  controlsProps: { actions: {cmdSinglePage: {active: true}} },

     pdf: 'public/books/pdf/350_upper.pdf',

    propertiesCallback: function(props) {

       props.page.depth /= 2.5;
       props.cover.padding = 0.002;

       return props;
     },
     template: {
       html: 'templates/default-book-view.html',
       styles:

      [
     'css/short-black-book-view.css'
       ],
       links: [
        {
           rel: 'stylesheet',
           href: 'css/font-awesome.min.css'
         }
       ],
       script: 'js/default-book-view.js'
   }
   });
   }

Hi !

Do you think you can help ? I would like to have a single page view by default ... your code provides a solution for this. Where do i add this code ?

Thanks for your reply.

Regards Coen

Hi there, I tried to realize an automatic switch to "Single Page" on small screens (max-width: 979px). Therefore I defined two wrappers with the Flipbook inside like:

<div class="flipbook-wrapper small-screen">
    <div class="flip-book-container mobil-container">

    </div>
</div>

The containers are switched by CSS @media screen ...

Then I created the container with the FlipBook for Big Screens with default settings. And for the container with the FlipBook for Small Screens I added the controlsProps: controlsProps: { actions: {cmdSinglePage: {active: true}} },

When I decrease the browser width, the switch between the two containers works fine, but the Flipbook on Small screens is still in Default Page View (not in Single Page View).

Are the mentioned properties still valid with actual browsers? Or is it a matter of my settings? Here the script I used in my testcase:

   $('.mobil-container').FlipBook({
    controlsProps: { actions: {cmdSinglePage: {active: true}} }, // Single Page Mode as Default
    pdf: 'src/TT-Akademie-Saisonheft-v2.pdf',
    pages: 12,
    propertiesCallback: function(props) { // optional function - it lets to customize 3D FlipBook
           // props.page.depth /= 2.5;
           props.cssLayersLoader = function(n, clb) {
        if(!n) {
          clb([{
            css: [
              '.center-page {',
                'position: absolute;',
                'left: 50%;',
                'top: 50px;',
                'transform: translate(-50%, 0);',
              '}',
              'iframe {',
                'border: 0;',
              '}'
            ].join(''),
            html: ''
          }]);
        }
      };
      return props;
    }  
});

Thanks for support and regards, Heiko