如何獲得變焦與turn.js

Question

我試圖讓使用turn.js具有相同的功能的網站http://www.turnjs.com/samples/magazine/

的例子翻書當如何實現這一點，我在這些跑來找工作
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

但是，隨着在頁面上這些指令後，我的工作翻書沒有像樣品一個頁面。

我嘗試使用提供的示例並將其分解爲多個部分以獲取我的工作，但我沒有更接近解決此問題，並且該示例包含一堆其他腳本，我不確定它們是否需要縮放或用於其他事情。

不知道如果我錯過了一些非常簡單的東西，或者我的代碼真的關閉了，但是我的html看起來像這樣。

眼下所有點擊縮放按鈕時，我得到的是，這本書可擴展至150％

想知道是否有人能告訴我什麼，我缺少獲取變焦？

<div class="row"> 
    <div id="zoom-viewport"> 
     <div id="flipbook"> 

      // wordpress loop 

       <div class="page"> 
        // page contents 
       </div> 

      // end loop 

     </div>       
    </div> 
</div> 

和jQuery

//---------------------------- 
    // Initialize 

    var _width = $('#flipbook-wrap').width(), 
     _height = Math.round(70.909090909/100*_width), 
     _winWidth = $window.width(), 
     _winHeight = $window.height(); 

    $("#flipbook").turn({ 
     width: _width, 
     height: _height, 
     autoCenter: true 
    }); 

    //---------------------------- 
    // Zoom in button 

    $('.fullscreen').click(function(e){ 
     e.preventDefault(); 
     $("#flipbook").turn("zoom", 1.5); 

    }); 

Answer 1

您的代碼沒有顯示一切（例如其中「.fullscreen」或‘縮放鍵’是在你的HTML），所以我的答案可能不準確。

在研究樣本，你應該找到的代碼：

$('.magazine-viewport').zoom('zoomIn', pos); 

這似乎從轉不同（「縮放」，...），看來是無證。這是一個放大定義爲轉動對象的元素的函數。我相信，對你來說，這是你的「#flipbook」元素，而不是「.magazine-viewport」。

參數是「zoomIn」和pos，它可能與您目前使用的功能不同。 「pos」似乎是一個JS對象，它包含「x」和「y」屬性，用於定義您在雜誌上點擊的位置。這些座標是相對於雜誌而不是整個屏幕的，所以請記住這一點。

所以，我認爲你需要這樣的事情（至少嘗試在一個起點）：

$('#flipbook').click(function(e) { 
    var pos = { 
     x: e.pageX - $(this).offset().left, 
     y: e.pageY - $(this).offset().top 
    }; 
    $('#flipbook').zoom('zoomIn', pos); 
}); 

希望這有助於！

Answer 2

我有同樣的問題，但我決定只使用第三方縮放插件（Jack Moore's jQuery zoom）。事實證明，該網站中的示例要複雜得多，用json爲每個段落創建不同的區域和圖像。

這真的取決於你使用的是什麼，但我認爲文檔不正確，或者軟件本身缺少一些東西。無論哪種方式，我建議您考慮使用其他解決方案來解決問題。

Answer 3

獲得縮放以輪流工作。JS，有你需要做三件事情：

1. 設置適當的DOM結構，變焦將不無「容器」 DIV工作包裹翻書。

   <div class="magazine-viewport"> 
       <div class="container"> 
         <div class='magazine'> 
          <div id='p1'><img src='book_1.jpg'></div> 
          <div id='p2'><img src='book_2.jpg'></div>    
         </div> 
       </div> 
   </div> 
   

2. 設置的JS事件

   $(document).ready(function() { 
       //Initialize the turn.js flipbook 
       $('.magazine').turn({ 
         width: 1136, 
         height:734, 
         pages:100, 
         autoCenter: false, 
         when:{ 
          missing: function (e, pages) {      
           for (var i = 0; i < pages.length; i++) { 
            $('.magazine').turn('addPage',page[pages[i]],pages[i]); 
           } 
          } 
         } 
       }); 
   
       //Initialize the zoom viewport 
       $('.magazine-viewport').zoom({ 
         flipbook: $('.magazine') 
       }); 
   
       //Binds the single tap event to the zoom function 
       $('.magazine-viewport').bind('zoom.tap', zoomTo); 
   
       //Optional, calls the resize function when the window changes, useful when viewing on tablet or mobile phones 
       $(window).resize(function() { 
        resizeViewport(); 
       }).bind('orientationchange', function() { 
        resizeViewport(); 
       }); 
   
       //Must be called initially to setup the size 
       resizeViewport(); 
   } 
   
   function page(num){ 
       var elem = $('<div />',{}).html('<div><img src="book_'+num+'.jpg></div>'); 
       return elem; 
   } 
   
   function zoomTo(event) {  
        setTimeout(function() { 
         if ($('.magazine-viewport').data().regionClicked) { 
          $('.magazine-viewport').data().regionClicked = false; 
         } else { 
          if ($('.magazine-viewport').zoom('value')==1) { 
           $('.magazine-viewport').zoom('zoomIn', event); 
          } else { 
           $('.magazine-viewport').zoom('zoomOut'); 
          } 
         } 
        }, 1); 
   } 
   
   function resizeViewport() { 
       var width = $(window).width(), 
        height = $(window).height(), 
        options = $('.magazine').turn('options'); 
   
       $('.magazine-viewport').css({ 
        width: width, 
        height: height 
       }).zoom('resize'); 
   } 
   

3. 定義的元素正確的CSS樣式，這裏的訣竅是，雜誌類的負座標是由的頂部&左偏移補償容器類。

   .magazine-viewport .container{ 
       position:absolute; 
       top:367px; 
       left:568px; 
       width:1136px; 
       height:734px; 
       margin:auto; 
   } 
   
   .magazine-viewport .magazine{ 
       width:1136px; 
       height:734px; 
       left:-568px; 
       top:-367px; 
   } 
   
   /* Important: the image size must be set to 100%. 
   * Otherwise the position of the images would be messed up upon zooming. 
   */ 
   .magazine img{ 
       width:100%; 
       height:100%; 
   } 
   

這應該得到它的工作，如果你想在雜誌例如在變焦時加載圖像的放大版本，看看在loadSmallPage（）& loadLargePage（）函數。

Answer 4

turn.js提供了一個縮放的例子。使其工作的困難是收集所有必需的文件。但如果你看代碼，這是可能的。假設根目錄是雜誌，它會將兩個文件夾放到Java腳本所在的位置以獲取lib和extras文件夾。另外，您必須在頁面文件夾中添加「默認」和大頁面。當你得到樣本時，只有縮略圖。說1-thumb.jpg，你必須添加1.jpg和1-large.jpg

有一個非常有用的Firefox插件，讓他們：CacheViewer 。

我已經設法用我的書做了，並且重新組織代碼中的路徑以使事情變得更清潔：將lib和extras放在與頁面相同的級別。 「/../../」的遞歸grep將爲您提供html和js代碼中的所有位置。