2013-07-12 20 views
5

Sto cercando di fare un flipbook utilizzando turn.js che ha la stessa funzionalità come l'esempio sul sito http://www.turnjs.com/samples/magazine/Come ottenere zoom lavorare con turn.js

Se si guarda a come raggiungere questo obiettivo mi sono imbattuto in questi pagine
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

Ma dopo aver seguito queste istruzioni sulle pagine mia flipbook funziona nulla come il campione di uno.

Ho provato a utilizzare l'esempio fornito e suddividendolo in sezioni per far funzionare il mio ma non mi sono avvicinato alla soluzione di questo problema e il campione contiene una serie di altri script e non sono sicuro che siano necessari per lo zoom o sono usati per altre cose.

Non so se mi manca qualcosa di veramente semplice o se il mio codice è davvero spento ma il mio html sembra qualcosa del genere.

In questo momento tutto quello che ottiene quando si fa clic sul pulsante di zoom è che il libro scalare fino 150%

chiedevo se qualcuno potrebbe dirmi che cosa mi manca per ottenere che zoom?

<div class="row"> 
    <div id="zoom-viewport"> 
     <div id="flipbook"> 

      // wordpress loop 

       <div class="page"> 
        // page contents 
       </div> 

      // end loop 

     </div>       
    </div> 
</div> 

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

    }); 
+2

aventi gli stessi problemi, il documento è piuttosto incompleto nello spiegare come implementare effettivamente lo zoom – slawrence10

+0

Ho usato i plugin Zoomooz.js ci sono anche troppo semplici da usare .... http: //jaukia.github.io/zoomooz/ If u qualsiasi domanda tu possa chiedermi di questo plugin.IF che puoi provare con questo –

+0

Come rendere turnjs fullscreen? Nel campione di prova, voglio avere un libro a schermo intero. Almeno vicino alla dimensione a schermo intero. –

risposta

7

Il tuo codice non sta mostrando tutto (ad esempio, dove il "pulsante di zoom" ".fullscreen" oppure è in HTML), quindi la mia risposta potrebbe non essere precisi.

Guardando il campione, si dovrebbe trovare il codice:

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

Questo sembra essere diverso dal turno ('zoom', ...), e sembra essere senza documenti. Questa è una funzione che ingrandirà l'elemento definito come oggetto di svolta. Credo che per te questo sia il tuo elemento "#flipbook", invece di ".magazine-viewport".

I parametri sono "zoomIn" e pos, che potrebbero essere una funzionalità diversa rispetto a ciò che si sta utilizzando al momento. Il "pos" sembra essere un oggetto JS che contiene proprietà "x" e "y", destinate a definire dove hai cliccato sulla rivista. Queste coordinate sono relative alla rivista, non all'intero schermo, quindi tienilo a mente.

così, penso che avete bisogno di qualcosa di simile (almeno provare ad un punto di partenza):

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

Spero che questo aiuti!

+2

Ehi, questo non ha funzionato per il mio libro, ma ha spiegato come utilizzare lo zoon 100 volte meglio del sito web. Penso che sarò in grado di lavorare con questo esempio per far funzionare lo zoom –

+0

Grazie, sono contento che abbia aiutato in qualche modo! –

+0

@AndyMudrak Come rendere Turnjs fullscreen? Nel campione di prova, voglio avere un libro a schermo intero. Almeno vicino alla dimensione a schermo intero. –

4

Ho avuto lo stesso problema, ma ho deciso di utilizzare solo un plug-in di zoom di terze parti (Jack Moore's jQuery zoom). Si scopre che l'esempio nel sito è molto più complicato, con un json per creare diverse regioni e immagini per ogni paragrafo.

Dipende davvero da cosa stai usando turn.js, ma penso che la documentazione non sia corretta, o che il software stesso manchi qualcosa. Ad ogni modo, suggerisco di esaminare l'utilizzo di qualche altra soluzione per il problema.

+0

Puoi per favore mostrare un esempio in jsfiddle –

3

Per ottenere lo zoom per lavorare con svolta.js, ci sono tre cose che dovete fare:

  1. Setup la struttura Dom corretta, lo zoom non funziona senza il div "contenitore" per avvolgere il 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 eventi 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. definire gli stili CSS corretto per gli elementi, il trucco è che le coordinate negative della classe magazine è compensata dai migliori & offset sinistro del classe del contenitore.

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

Questo dovrebbe farlo funzionare, se si desidera caricare una versione più grande dell'immagine su zoom, date un'occhiata alla loadSmallPage() & loadLargePage funzioni() nell'esempio magazine.

+0

Come posso aggiungere una funzione reattiva a questo? – Fede

0

turn.js fornisce un esempio con lo zoom. La difficoltà di farlo funzionare è raccogliere tutti i file richiesti. Ma se guardi il codice, è possibile. Diciamo che la radice è rivista, va su due cartelle per ottenere lib e cartelle extra dove sono in posa gli script java. Inoltre, devi aggiungere le "impostazioni predefinite" e le pagine di grandi dimensioni nella cartella delle pagine. Quando ottieni il campione, ci sono solo le miniature. Dì per 1-thumb.jpg, devi aggiungere 1.jpg e 1-large.jpg

C'è un plugin per Firefox molto utile per ottenerle: CacheViewer .

Sono riuscito a farlo con il mio libro e riorganizzare i percorsi nel codice per avere qualcosa di più pulito: mettere lib e extra allo stesso livello delle pagine. Un grep ricorsivo per "/../../" ti darà tutte le posizioni nel codice html e js.

Problemi correlati