如何使用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

您的代碼沒有顯示所有內容（例如HTML中的“.fullscreen”或“縮放按鈕”），所以我的回答可能不准確。

查看示例，您應該找到代碼：

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

這似乎與轉彎（'縮放'，...）不同，並且似乎沒有記錄。 這是一個放大定義為轉彎對象的元素的函數。 我相信，對你來說，這是你的“#flipbook”元素，而不是“.magazine-viewport”。

參數是“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

要使縮放與turn.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 3

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

這實際上取決於你使用turn.js的內容，但我認為文檔不對，或軟件本身缺少某些東西。 無論哪種方式，我建議您考慮使用其他解決方案來解決問題。

Answer 4

turn.js提供了一個縮放示例。 使其工作的困難是收集所有必需的文件。 但如果你看代碼，就有可能。 說root是雜志，它有兩個文件夾來獲取lib腳本和java腳本所在的附加文件夾。 此外，您必須在pages文件夾中添加“默認”和大頁面。 當你得到樣本時，只有縮略圖。對於1-thumb.jpg說，你必須添加1.jpg和1-large.jpg

有一個非常有用的Firefox插件來獲取它們：CacheViewer。

我已經設法用我的書來完成它，並重新組織代碼中的路徑以獲得更清晰的東西：將lib和extras放在與頁面相同的級別。 “/../../”的遞歸grep將為您提供html和js代碼中的所有位置。