How to get zoom working with turn.js

Question

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/

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

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.

Right now all I get when clicking the zoom button is that the book scales up 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

    //----------------------------
    // 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);

    });

having the same issues, document is rather incomplete in explaining how to actually implement zoom — slawrence10, Aug 01 '13 at 09:24
I have used Zoomooz.js plugins there are too simple to use ....http://jaukia.github.io/zoomooz/ If u hv any query u can ask me abt this plugins.IF u wht u can try with this — Somnath Kharat, Aug 03 '13 at 12:25
How to make turnjs fullscreen? In steve sample, i want to have a fullscreen book. At least near fullscreen size. — Dr.jacky, Jun 29 '15 at 05:39

score 8 · Accepted Answer · edited Oct 23 '13 at 16:16

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.

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

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.

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!

Hey, this did not work for my book, but it explained how to use the zoon 100 times better than the website. I think I will be able to work with this example to get the zoom working — Chris G-Jones, Aug 06 '13 at 21:04
@AndyMudrak How to make turnjs fullscreen? In steve sample, i want to have a fullscreen book. At least near fullscreen size. — Dr.jacky, Jun 29 '15 at 05:39

score 8 · Answer 2 · answered Jan 31 '14 at 20:55

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

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

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.

That was extremely useful! Small note: I set `top` and `left` attributes of `.container` to `0px` and removed `top` and `left` from `.magazine` — Tashows, Jun 06 '18 at 18:20

score 5 · Answer 3 · answered Oct 22 '13 at 19:45

I had the same problem, but I decided to just use a third party zoom plugin (Jack 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.

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.

score 0 · Answer 4 · answered Sep 11 '14 at 17:17

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

There is a very usefull Firefox plugin to get them : 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.

How to get zoom working with turn.js

4 Answers4