如何使用 turn.js 进行缩放答案

【问题标题】：How to get zoom working with turn.js如何使用 turn.js 进行缩放
【发布时间】：2013-07-10 13:10:27
【问题描述】：

我正在尝试使用 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);

    });

【问题讨论】：

有同样的问题，文档在解释如何实际实现缩放方面相当不完整
我使用过 Zoomooz.js 插件，使用起来太简单了 ....jaukia.github.io/zoomooz 如果你有任何疑问，你可以问我这个插件。如果你可以试试这个
如何让turnjs全屏？在史蒂夫示例中，我想要一本全屏书。至少接近全屏尺寸。

标签： javascript jquery jquery-plugins turnjs

【解决方案1】：

您的代码并未显示所有内容（例如，“.fullscreen”或“缩放按钮”在您的 HTML 中的位置），所以我的回答可能不准确。

查看示例，您应该找到代码：

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

这似乎与 turn('zoom', ...) 不同，并且似乎没有记录。这是一个将放大定义为转弯对象的元素的功能。我相信，对你来说，这是你的“#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);
});

希望这会有所帮助！

【讨论】：

嘿，这对我的书不起作用，但它解释了如何使用比网站好 100 倍的 zoon。我想我将能够使用此示例来使缩放工作
谢谢，很高兴它在某种程度上有所帮助！
@AndyMudrak 如何让 turnjs 全屏显示？在史蒂夫示例中，我想要一本全屏书。至少接近全屏尺寸。

【解决方案2】：

我遇到了同样的问题，但我决定只使用第三方缩放插件 (Jack Moore's jQuery zoom)。事实证明，站点中的示例要复杂得多，使用 json 为每个段落创建不同的区域和图像。

这实际上取决于您使用 turn.js 的目的，但我认为文档不正确，或者软件本身缺少某些内容。无论哪种方式，我都建议您考虑使用其他解决方案来解决该问题。

【讨论】：

【解决方案3】：

要让 zoom 与 turn.js 一起使用，您需要做三件事：

设置正确的 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>

设置 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');
}

为元素定义适当的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() 函数。

【讨论】：

如何添加响应功能？
这非常有用！小记：我将.container的top和left属性设置为0px，并从.magazine中删除了top和left
谢谢！你帮了我很多

【解决方案4】：

turn.js 提供了一个缩放示例。使其工作的困难在于收集所有必需的文件。但如果你看代码，这是可能的。假设根是杂志，它会向上两个文件夹获取 lib 和放置 java 脚本的 extras 文件夹。此外，您必须在 pages 文件夹中添加“默认”和大页面。当你拿到样本时，里面只有缩略图。比如说1-thumb.jpg，你必须添加1.jpg和1-large.jpg

有一个非常有用的 Firefox 插件来获取它们：CacheViewer。

我已经设法用我的书做到了这一点，并重新组织了代码中的路径以获得更清晰的内容：将 lib 和 extras 放在与 pages 相同的级别。 “/../../”的递归 grep 将为您提供 html 和 js 代码中的所有位置。

【讨论】：