jQuery 如何使用 turn.js 进行缩放

Question

提问by Chris G-Jones

I am trying to make a flipbook using turn.js that has the same functionality as the example on the website http://www.turnjs.com/samples/magazine/

我正在尝试使用与网站http://www.turnjs.com/samples/magazine/上的示例具有相同功能的 turn.js 制作翻书

When looking at how to achieve this I came across these pages
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

在查看如何实现这一点时，我遇到了这些页面
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

But after following these instructions on the pages my flipbook works nothing like the sample one.

但是在按照页面上的这些说明进行操作后，我的翻书与示例书完全不同。

I tried using the sample provided and breaking it down into sections to get mine working but I have not gotten any closer to solving this problem and the sample contains a bunch of other scripts and I am not sure if they are required for the zoom or are used for other things.

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

Not sure if I am missing something really simple or if my code is really off but my html looks something like this.

不确定我是否遗漏了一些非常简单的东西，或者我的代码是否真的关闭但我的 html 看起来像这样。

Right now all I get when clicking the zoom button is that the book scales up 150%

现在单击缩放按钮时我得到的只是书放大了 150%

Was wondering if anyone could tell me what I am missing to get that zoom?

想知道是否有人可以告诉我我缺少什么才能获得变焦？

<div class="row">
   <div id="zoom-viewport">
      <div id="flipbook">   

          // wordpress loop

               <div class="page">
                    // page contents
               </div>

          // end loop

      </div>                        
   </div>
</div>

and jQuery

和 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

回答by Andy Mudrak

Your code isn't showing everything (e.g. where ".fullscreen" or the "zoom button" is in your HTML), so my answer may not be precise.

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

Looking at the sample, you should find the code:

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

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

This seems to differ from turn('zoom', ...), and appears to be undocumented. This is a function that will zoom in the element defined as a turn object. I believe, for you, this is your "#flipbook" element, instead of ".magazine-viewport".

这似乎与 turn('zoom', ...) 不同，并且似乎没有记录。这是一个函数，可以放大定义为转弯对象的元素。我相信，对你来说，这是你的“#flipbook”元素，而不是“.magazine-viewport”。

The parameters are "zoomIn" and pos, which may be a different functionality that what you're using currently. The "pos" appears to be a JS object that contains "x" and "y" properties, meant to define where you clicked on the magazine. These coordinates are relative to the magazine, not the whole screen, so keep that in mind.

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

So, I think you need something like this (at least try it at a starting point):

所以，我认为你需要这样的东西（至少在开始时尝试一下）：

$('#flipbook').click(function(e) {
    var pos = {
        x: e.pageX - $(this).offset().left,
        y: e.pageY - $(this).offset().top
    };
    $('#flipbook').zoom('zoomIn', pos);
});

Hope this helps!

希望这可以帮助！

Answer 2

回答by Kyle Liu

To get zoom to work with turn.js, there are three things you need to do:

要使用 turn.js 进行缩放，您需要做三件事：

Setup the proper dom structure, zoom won't work without the "container" div to wrap the flipbook.

<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>

Setup the js events

$( 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');
}

Define proper css styles for the elements, the trick here is that the negative coordinates of the magazine class is compensated by the top & left offsets of the container class.

.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%;
}

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

That should get it to work, if you want to load a larger version of the image upon zooming, take a look at the loadSmallPage() & loadLargePage() functions in the magazine example.

这应该让它工作，如果你想在缩放时加载更大版本的图像，请查看杂志示例中的 loadSmallPage() 和 loadLargePage() 函数。

Answer 3

回答by deimos

I had the same problem, but I decided to just use a third party zoom plugin (Hyman Moore's jQuery zoom). It turns out the example in the site is a lot more complicated, with a json to create diferent regions and images for each paragraph.

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

It really depends on what you're using turn.js for, but I think the documentation isn't right, or the software itself is missing something. Either way, I do suggest you look into using some other solution for the problem.

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

Answer 4

回答by lalebarde

turn.js provides an example with zoom. The difficulty to make it work is to gather all the required files. But if you watch the code, it is possible. Say the root is magazine, it goes two folders up to get lib and extras folders where java scripts are laying. In addition, you have to add the "default" and large pages in the pages folder. When you get the sample, there are only the thumbnails in. Say for 1-thumb.jpg, you have to add 1.jpg and 1-large.jpg

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

There is a very usefull Firefox plugin to get them : CacheViewer.

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

I have managed to do it with my book, and reorganize the paths in the code to have something cleaner: put lib and extras at the same level than pages. A recursive grep for "/../../" will give you all the locations in html and js code.

我设法用我的书做到了这一点，并重新组织了代码中的路径，使一些更清晰的东西：将 lib 和 extras 放在与页面相同的级别。"/../../" 的递归 grep 将为您提供 html 和 js 代码中的所有位置。

jQuery 如何使用 turn.js 进行缩放

提问by Chris G-Jones

回答by Andy Mudrak

回答by Kyle Liu

回答by deimos

回答by lalebarde

相关推荐

最近更新

标签

jQuery 如何使用 turn.js 进行缩放

提问by Chris G-Jones

回答by Andy Mudrak

回答by Kyle Liu

回答by deimos

回答by lalebarde

相关推荐

jQuery JSON：如何进行跨域 JSON 调用

jQuery 如何在jquery中检查IP地址的验证

jQuery 创建数组变量

jQuery 什么时候选择 mouseover() 和 hover() 函数？

相关推荐

最近更新

标签