Как заставить работать зум с помощью turn.js

Я пытаюсь сделать флипбук, используя 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);

    });
Источник

4 ответа

Решение

Ваш код не отображает все (например, где ".fullscreen" или "кнопка масштабирования" есть в вашем HTML), поэтому мой ответ может быть не точным.

Глядя на образец, вы должны найти код:

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

Это, кажется, отличается от поворота ("увеличить", ...), и, кажется, недокументировано. Это функция, которая будет увеличивать элемент, определенный как объект поворота. Я считаю, что для вас это ваш элемент "#flipbook" вместо ".magazine-viewport".

Параметры "zoomIn" и pos, которые могут отличаться от того, что вы используете в настоящее время. "Pos" - это объект JS, содержащий свойства "x" и "y", предназначенные для определения места, где вы щелкнули журнал. Эти координаты относятся к журналу, а не ко всему экрану, так что имейте это в виду.

Итак, я думаю, что вам нужно что-то вроде этого (по крайней мере, попробовать это в начальной точке):

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

Надеюсь это поможет!

Источник

Чтобы заставить zoom работать с 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() в примере журнала.

Источник

У меня была такая же проблема, но я решил просто использовать сторонний плагин zoom ( jQuery zoom от Jack Moore). Оказывается, пример на сайте намного сложнее, с помощью json для создания разных областей и изображений для каждого абзаца.

Это действительно зависит от того, для чего вы используете turn.js, но я думаю, что документация неверна, или в программном обеспечении чего-то не хватает. В любом случае, я советую вам использовать другое решение проблемы.

Источник

В файле turn.js приведен пример с увеличением. Сложность заставить его работать - собрать все необходимые файлы. Но если вы посмотрите код, это возможно. Скажем, корень - журнал, он идет в две папки, чтобы получить папки lib и extras, в которых лежат сценарии Java. Кроме того, вы должны добавить "по умолчанию" и большие страницы в папке страниц. Когда вы получите образец, в нем будут только миниатюры. Скажем, для 1-thumb.jpg вам нужно добавить 1.jpg и 1-large.jpg

Существует очень полезный плагин Firefox для их получения: CacheViewer.

Мне удалось сделать это с моей книгой и реорганизовать пути в коде, чтобы получить что-то более чистое: поставить lib и extras на том же уровне, что и страницы. Рекурсивный grep для "/../../" даст вам все места в html и js коде.

Источник
Другие вопросы по тегам