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

但是在页面上按照这些说明后，我的翻书不像样本那样工作。

我尝试使用提供的示例并将其分解为部分以使我的工作正常但我还没有更接近解决此问题，并且示例包含一堆其他脚本，我不确定它们是否是必需的缩放或用于其他事情。

不确定我是否遗漏了一些非常简单的内容，或者我的代码是否真的关闭但我的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

您的代码并未显示所有内容（例如，＆＃34; .fullscreen＆＃34;或者＆＃34;缩放按钮＆＃34;在您的HTML中），所以我的回答可能不准确。< / p>

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

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

这似乎与转弯（＆＃39; zoom＆＃39;，...）不同，并且似乎没有记录。这是一个放大定义为转弯对象的元素的函数。我相信，对你而言，这是你的＃＃;;＃flipbook＆＃34;元素，而不是＆＃34; .magazine-viewport＆＃34;。

参数是＆＃34; zoomIn＆＃34;和pos，它可能是您当前正在使用的功能。＆＃34; pos＆＃34;似乎是一个包含＆＃34; x＆＃34;的JS对象。和＆＃34; y＆＃34;属性，用于定义您在杂志上单击的位置。这些坐标是相对于杂志而不是整个屏幕的，所以请记住这一点。

所以，我认为你需要这样的东西（至少在起点尝试）：

$('#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一起使用，您需要做三件事：

设置正确的dom结构，如果没有“container”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（）＆amp; loadLargePage（）函数在杂志的例子中。

Answer 3

我遇到了同样的问题，但我决定只使用第三方缩放插件（Jack Moore's 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代码中的所有位置。

如何使用turn.js进行缩放

4 个答案: