How to get zoom working with turn.js

Question 1

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!

Question 2

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.

Question 3

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.

Question 4

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.