如何使用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 的用途，但我认为文档不正确，或者软件本身缺少某些内容。无论哪种方式，我确实建议您考虑使用其他解决方案来解决该问题。