Как я могу изменить высоту страницы turnjs

Question

здесь я использую флип-библиотеку turn js, и я хочу изменить высоту страницы turnjs. здесь он вычисляет высоту страницы, используя высоту клиента. теперь мне нужно изменить высоту страницы, чтобы сказать 700px. Как я могу это сделать?

<script type='text/javascript'> 
    (function() { 
     'use strict'; 
     var module = { 
      ratio: 1.38, 
      init: function (id) { 
       var me = this; 
       if (document.addEventListener) { 
        this.el = document.getElementById(id); 
        this.resize(); 
        this.plugins(); 
        window.addEventListener('resize', function (e) { 
         var size = me.resize(); 
         $(me.el).turn('size', size.width, size.height); 
        }); 
       } 
      }, 
      resize: function() { 
       this.el.style.width = ''; 
       this.el.style.height = ''; 
       var width = this.el.clientWidth, 
       height = Math.round(width/this.ratio), 
       padded = Math.round(document.body.clientHeight * 0.9); 
       if (height > padded) { 
        height = padded; 
        width = Math.round(height * this.ratio); 
       } 
       this.el.style.width = width + 'px'; 
       this.el.style.height = height + 'px'; 
       return { 
        width: width, 
        height: height 
       }; 
      }, 
      plugins: function() { 
       $(this.el).turn({ 
        gradients: true, 
        acceleration: true 
       }); 
       document.body.className = 'hide-overflow'; 
      } 
     }; 
     module.init('book'); 
    }()); 
</script> 

HTML:

<div class="t"> 
    <div class="tc rel"> 
     <div class="book" id="book">  
      <div class="page page1"> 
       <img src="image600x650.png"> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

У вас есть вся информация о website. Вы должны сделать что-то вроде этого:

$("flipbook").height(700); 

Answer 2

В main.js

function loadApp() { 

$('#canvas').fadeIn(1000); 

var flipbook = $('.magazine'); 

// Check if the CSS was already loaded 

if (flipbook.width()==0 || flipbook.height()==0) { 
    setTimeout(loadApp, 10); 
    return; 
} 

// Create the flipbook 

flipbook.turn({ 

     // Magazine width 

     // width: 922, 
     width: 1245, 

     // Magazine height 

     // height: 600, 
     height: 810, 

     // Duration in millisecond 

     duration: 1000, 

     // Hardware acceleration 

     acceleration: !isChrome(), 

     // Enables gradients 

     gradients: true, 

     // Auto center this flipbook 

     autoCenter: true, 

     // Elevation from the edge of the flipbook when turning a page 

     elevation: 50, 

     // The number of pages 

     pages: 12, 

     // Events 

     when: { 
      turning: function(event, page, view) { 

       var book = $(this), 
       currentPage = book.turn('page'), 
       pages = book.turn('pages'); 

       // Update the current URI 

       Hash.go('page/' + page).update(); 

       // Show and hide navigation buttons 

       disableControls(page); 


       $('.thumbnails .page-'+currentPage). 
        parent(). 
        removeClass('current'); 

       $('.thumbnails .page-'+page). 
        parent(). 
        addClass('current'); 



      }, 

      turned: function(event, page, view) { 

       disableControls(page); 

       $(this).turn('center'); 

       if (page==1) { 
        $(this).turn('peel', 'br'); 
       } 

      }, 

      missing: function (event, pages) { 

       // Add pages that aren't in the magazine 

       for (var i = 0; i < pages.length; i++) 
        addPage(pages[i], $(this)); 

      } 
     } 

}); 

Answer 3

является самым простым, просто изменить 'соотношение' ... 1 равна ширина высота X, 2 двойная высота, 1.5 - пропорция к высоте. 600x650 - соотношение 1.083.

Answer 4

Ниже приведен код для высоты журнала 500px и шириной 992px функции loadApp() {

flipbook.turn({ 

     // Magazine width 

     width: 922, 

     // Magazine height 
     // Modify below height as you need 

     height: 500, 

    } 

}); 

и изменить magazine.css/добавить стиль, как показано ниже установленной высоты, как вам нужно

.magazine-viewport .container{ 
    width:922px; 
    height:500px; 
} 

.magazine-viewport .magazine{ 
    width:922px; 
    height:500px; 
} 

.magazine-viewport .page{ 
    width:922px; 
    height:500px; 
} 
.magazine-viewport .next-button, 
.magazine-viewport .previous-button{ 
    width:22px; 
    height:500px; 
}