如何使用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代码中的所有位置。