It’s been two and half week that I keep on struggling for implementing zoom effect in my book. I tried alot but sometimes images start fluctuating, sometimes user unable to move zoom pages, sometimes slider not shown properly and so on errors.  So I decided to learn little more javascript and then dive into master code. After two days of learning JS I come back to my work and start implementing code in it. After spending six hours on code I’m able to complete almost everything regarding flipBook. Now one can zoom it, turn pages and goto particular chapter with single click. Now it’s seems easy to work in turn.js as I learned so many things while doing this task. Few things like :

  1. First and last page as hard page like in real book.
    To give hard page effect in book one need to use 4 or 5 lines of code if he’s using turn.js
    for eg:

     <div class="hard"></div>
     <div class="hard"></div>
     <div class="hard p393"></div>
     <div class="hard p394"></div>

    This will give hard effect to front, front-back page and last-inside, last-outside page.

  2. To implement zoom effect I created <div> and use functions of in-build zoom.min.js
    $('.magazine-viewport').zoom({
        flipbook: $('.magazine'),
        max: function() { 
            return largeMagazineWidth()/$('.magazine').width();
       },
       when: {
          swipeLeft: function() {
          $(this).zoom('flipbook').turn('next');
        },
        swipeRight: function() {
            $(this).zoom('flipbook').turn('previous');
        },
        resize: function(event, scale, page, pageElement) {
        if (scale==1)
            loadSmallPage(page, pageElement);
        else
            loadLargePage(page, pageElement);
        },
        zoomIn: function () {
            $('.thumbnails').hide();
            $('.made').hide()
            $('.magazine').removeClass('animated').addClass('zoom-in');
            $('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
        if (!window.escTip && !$.isTouch) {
            escTip = true;
       $('<div />', {'class': 'exit-message'}).
            html('<div>Press ESC to exit</div>').
            appendTo($('body')).
            delay(2000).
            animate({opacity:0}, 500, function() {
            $(this).remove();
    });
    }
    },
  3. To implement index at the top is created <div> magazine. To update index when clicked on it i.e if I click on chapter 3 then number three should displayed on right side of book and when I clicked on chapter 4 then number 4 get highlighted and number 3 should moved to left side of page for that is used updatetab function
    function updateTabs() {
    
    var tabs = {11:'1-', 19:'2-', 26:'3-', 42:'4-', 67:'5-', 79:'6-', 95:'7-', 113:'8-', 143:'9-', 150:'10-', 165:'11-', 217:'12-', 246:'13-', 272:'14-', 276:'15-', 280:'16-', 297:'17-', 307:'18-', 351:'19'},
    
    left = [],
    right = [],
    book = $('.magazine-viewport .container .magazine'),
    actualPage = book.turn('page'),
    view = book.turn('view');
        for (var page in tabs) {
             var isHere = $.inArray(parseInt(page, 10), view)!=-1;
         if (page>actualPage && !isHere)
             right.push('<a href="#page/' + page + '">' + tabs[page] + '</a>');
         else if (isHere) {
             if (page%2===0)
                 left.push('<a href="#page/' + page + '" class="on">' + tabs[page] + '</a>');
             else
                right.push('<a href="#page/' + page + '" class="on">' + tabs[page] + '</a>');
            } else
                left.push('<a href="#page/' + page + '">' + tabs[page] + '</a>');
    }
    $('.magazine-viewport .container .magazine .tabs .left').html(left.join(''));
    $('.magazine-viewport .container .magazine .tabs .right').html(right.join(''));
    }

    This code will update the index.

Also, as I see the most of the things are worked out in JS, even the
flip task was in JS. I have joined the onlinecourse for JS do the
things at advance level. Moreover my previous course MongoDB was over
and I am eagerly waiting for the certificate with a score of 85%.

Advertisements