turn.js

Question

私はこれらに出くわしたこれを実現する方法を見てみると、私はウェブサイト http://www.turnjs.com/samples/magazine/

上の例と同じ機能を持っているturn.jsを使用してフリップブックを作成しようとしています

で作業ズームを取得する方法ページ http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

しかし、ページ上の手順に従った後、私のフリップブックは、サンプル1のように何も働かない
。

私は提供されたサンプルを使用して掘り下げて作業しましたが、この問題を解決するためには何も近づきませんでした。サンプルには他のスクリプトも含まれています。ズームや他のもののために使用されます。

本当にシンプルなものが欠落しているか、コードが実際にはオフになっていて、HTMLがこのように見えるかどうかはわかりません。今

ズームボタンをクリックしたときに私が得るすべての本は誰もが私は、ズームを得るために行方不明です何を私に言うことができる場合は150％

は思っていたスケールアップということでしょうか？ （「.fullscreen」または 『ズームボタン』は、あなたのHTMLにある場合など）

<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

あなたのコードは、すべてのものを示していないので、私の答えは正確ではないかもしれません。

サンプルを見ると、あなたがコードを見つける必要がありますが：

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

これは（「ズーム」、...）と異なっているようだ、と文書化されていないように見えます。これは、ターンオブジェクトとして定義された要素をズームインする関数です。私はあなたのために、これは ".magazine-viewport"ではなく "#flipbook"要素だと考えています。

パラメータは「zoomIn」とposです。これは現在使用している機能とは異なる機能です。 「pos」は、「x」と「y」のプロパティを含むJSオブジェクトのように見え、マガジンをクリックした場所を定義します。これらの座標は、画面全体ではなく、雑誌との相対的なものなので、心に留めておいてください。

だから、私はあなたが（少なくとも出発点でそれを試してみてください）このようなものが必要だと思う：

$('#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は各段落ごとに異なる領域とイメージを作成しています。

本当にあなたがturn.jsを使っているかどうかにかかっていますが、ドキュメントが正しくないとか、ソフトウェア自体に何か不足があると思います。いずれにせよ、私はあなたが問題のための他の解決策を使うことを検討することを提案します。

Answer 3

ターンでズームするにはjsが、あなたがする必要がある三つのことがあります。

1. セットアップ適切なDOM構造は、ズームはフリップブックをラップする「コンテナ」div要素なしでは動作しません。 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'); 
   } 
   

2. 要素のための適切なCSSスタイルを定義

   <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> 
   

3. セットアップは、ここでのトリックは雑誌のクラスの負の座標はのトップ&左オフセットによって補償されるということですコンテナクラス。それが動作するように取得する必要

   .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にはズームの例があります。難しいのは、必要なファイルをすべて集めることです。しかし、コードを見れば可能です。ルートが雑誌だと言うと、2つのフォルダに移動して、Javaスクリプトが置かれているlibとextrasフォルダを取得します。さらに、 "default"と大きなページをpagesフォルダに追加する必要があります。サンプルを入手するとサムネイルのみが表示されます。1-thumb.jpgと言って、1.jpgと1-large.jpgを追加する必要があります。

Firefoxのプラグインを入手するには非常に便利です：CacheViewer 。

私は自分の本でそれをすることができたし、コード内のパスを整理して、何かをきれいにする：libとextrasをページと同じレベルに置く。 "/../../"の再帰的なgrepは、htmlとjsコードのすべての場所を提供します。