turn.js

Question

मैं वेबसाइट http://www.turnjs.com/samples/magazine/

पर उदाहरण के जैसी ही है कि एक फ़्लिपपुस्तिका turn.js का उपयोग कर बनाने के लिए कोशिश कर रहा हूँ जब यह मैं इन में आए कैसे प्राप्त करने के लिए पर देख रहे हैं के साथ काम कर ज़ूम कैसे प्राप्त करें पृष्ठों
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js

लेकिन पृष्ठों पर इन निर्देशों का पालन करने के बाद अपने फ़्लिपपुस्तिका नमूना एक जैसा कुछ भी नहीं काम करता है।

मैंने प्रदान किए गए नमूने का उपयोग करने और इसे काम करने के लिए इसे खंड में तोड़ने का प्रयास किया लेकिन मुझे इस समस्या को हल करने के करीब कोई भी नहीं मिला है और नमूने में अन्य स्क्रिप्ट्स का एक गुच्छा शामिल है और मुझे यकीन नहीं है कि उन्हें आवश्यकता है या नहीं ज़ूम या अन्य चीजों के लिए उपयोग किया जाता है।

सुनिश्चित नहीं है कि मुझे कुछ सचमुच सरल याद आ रहा है या यदि मेरा कोड वास्तव में बंद है लेकिन मेरा एचटीएमएल ऐसा कुछ दिखता है।

अभी सब मैं जब जूम बटन पर क्लिक मिलता है कि इस पुस्तक ऊपर मापता है 150%

सोच अगर कोई मुझे बता सकते हैं कि मैं क्या है कि जूम पाने के लिए याद आ रही थी है?

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

      // wordpress loop 

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

      // end loop 

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

और 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

आपका कोड सब कुछ नहीं दिखा रहा है (उदाहरण के लिए, जहां ".fullscreen" या "ज़ूम बटन" अपने HTML में है), तो मेरा उत्तर नहीं सटीक हो सकता है।

नमूना को देखते हुए, आप कोड खोजना चाहिए:

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

यह बदले से अलग करने के लिए ('जूम', ...) लगता है, और undocumented प्रतीत होता है। यह एक ऐसा फ़ंक्शन है जो टर्न ऑब्जेक्ट के रूप में परिभाषित तत्व में ज़ूम करेगा। मेरा मानना ​​है कि, आपके लिए, यह "। मैगज़ीन-व्यूपोर्ट" के बजाय आपकी "#flipbook" तत्व है।

पैरामीटर "ज़ूम इन" और पॉज़ हैं, जो कि वर्तमान में उपयोग की जा रही एक अलग कार्यक्षमता हो सकती है। "Pos" एक जेएस ऑब्जेक्ट प्रतीत होता है जिसमें "x" और "y" गुण होते हैं, जिसका अर्थ है कि आपने पत्रिका पर क्लिक किया था। ये निर्देशांक पत्रिका के सापेक्ष हैं, पूरी स्क्रीन नहीं, इसलिए इसे ध्यान में रखें।

तो, मुझे लगता है कि आप कुछ इस तरह की जरूरत है (कम से कम यह एक प्रारंभिक बिंदु पर कोशिश):

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

आशा इस मदद करता है!

Answer 2

मुझे एक ही समस्या थी, लेकिन मैंने केवल एक तृतीय पक्ष ज़ूम प्लगइन (Jack Moore's jQuery zoom) का उपयोग करने का निर्णय लिया। यह पता चला है कि साइट में उदाहरण बहुत जटिल है, एक जेसन के साथ प्रत्येक अनुच्छेद के लिए अलग-अलग क्षेत्रों और छवियों को बनाने के लिए।

यह वास्तव में निर्भर करता है कि आप turn.js का उपयोग कर रहे हैं, लेकिन मुझे लगता है कि दस्तावेज़ सही नहीं है, या सॉफ़्टवेयर में कुछ याद आ रहा है। किसी भी तरह से, मैं सुझाव देता हूं कि आप समस्या के लिए कुछ अन्य समाधान का उपयोग करें।

Answer 3

बारी के साथ काम करने के लिए ज़ूम प्राप्त करने के लिए।js, वहाँ तीन चीजें आप क्या करने की जरूरत है:

1. सेटअप उचित डोम संरचना, ज़ूम "कंटेनर" div बिना काम नहीं करेगा फ़्लिपपुस्तिका रैप करने के लिए।

   <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. सेटअप 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. तत्वों के लिए उचित सीएसएस शैलियों को परिभाषित करें, चाल है कि यहाँ पत्रिका वर्ग के नकारात्मक निर्देशांक के शीर्ष & छोड़ ऑफसेट से मुआवजा दिया है है कंटेनर कक्षा।

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

कि यह काम करने के लिए, यदि आप पत्रिका के उदाहरण में, जूम करने पर छवि का एक बड़ा संस्करण लोड() फ़ंक्शन loadSmallPage() & loadLargePage पर एक नज़र लेने के लिए मिलना चाहिए।

Answer 4

turn.js ज़ूम के साथ एक उदाहरण प्रदान करता है। इसे काम करने में कठिनाई सभी आवश्यक फाइलों को इकट्ठा करना है। लेकिन अगर आप कोड देखते हैं, तो यह संभव है। कहें जड़ पत्रिका है, यह दो स्वाद प्राप्त करता है ताकि lib और अतिरिक्त फ़ोल्डरों को प्राप्त किया जा सके जहां जावा स्क्रिप्ट बिछा रहे हैं। इसके अतिरिक्त, आपको पेज फ़ोल्डर में "डिफ़ॉल्ट" और बड़े पृष्ठ जोड़ना होगा। जब आप नमूना प्राप्त करते हैं, तो केवल थंबनेल होते हैं। 1-thumb.jpg के लिए कहें, आपको 1.jpg और 1-big.jpg

उन्हें प्राप्त करने के लिए एक बहुत उपयोगी फ़ायरफ़ॉक्स प्लगइन है: CacheViewer ।

मैंने इसे अपनी पुस्तक के साथ करने में कामयाब रहा है, और कुछ क्लीनर रखने के लिए कोड में पथों को पुनर्गठित किया है: पृष्ठों की तुलना में समान स्तर पर lib और अतिरिक्त रखें। "/../../" के लिए एक रिकर्सिव grep आपको HTML और जेएस कोड में सभी स्थानों को देगा।