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

    });

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

Answer 2

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

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

2. 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');
   }
   

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