2015-02-20 10 views
5

Vorrei aggiungere un effetto sonoro quando si gira una pagina, usando il plugin jquery turn.js. Quindi il primo passo sarebbe testare la funzione che lo fa secondo la documentazione online. Quindi il codice dovrebbe essere qualcosa di simile:turn.js aggiunge suono quando la pagina è girata

<script type="text/javascript"> 
    function loadApp() { 

    // Create the flipbook 

    $('.flipbook').turn({ 
      width:1000, 
      height:680, 
      elevation: 50, 
      gradients: true, 
      autoCenter: false, 
    }); 
    $("#flipbook").bind("turned", function(event, page, view) { 
     alert("Page: "+page); 
    }); 
    } 

    yepnope({ 
    test : Modernizr.csstransforms, 
    yep: ['../res_cod/js/turn.js'], 
    nope: ['../res_cod/js/turn.html4.min.js'], 
    both: ['../res_cod/css/basic.css'], 
    complete: loadApp 
    }); 
</script> 

Ma la cosa è non succede nulla nella console sviluppatori. Nessun avviso, niente di niente.

+0

Forse la funzione "LoadApp" è in esecuzione prima che il DOM è costruito. – Pointy

risposta

3

mettere il vostro core nella sezione pronti documento o eseguire la funzione

$(document).ready(function(){ 
    //put your code here 
    }); 

grazie!

+0

grazie per l'intuizione, ma il problema era il fatto che nella documentazione online il "#flipbook" faceva riferimento a un id mentre nel mio progetto veniva indicato come ".flipbook", una classe. Colpa mia. –

6

E 'solo il selettore è stato utilizzato non è quello corretto - notare la differenza tra .flipbook e #flipbook

provare questo

$(".flipbook").bind("turned", function(event, page, view) { 
    console.log("Page: "+page); 
}); 
0
function loadApp() { 
//$('#audio')[0].play(); 
// Create the flipbook 

$('.flipbook').turn({ 

     //when:{turning:flip.playclip()}, 

     // Width 

     width:922, 

     // Height 

     height:600, 

     // Elevation 

     elevation: 50, 

     // Enable gradients 

     gradients: true, 

     // Auto center this flipbook 

     autoCenter: true 

}); 
} 

// Load the HTML4 version if there's not CSS transform 

yepnope({ 
test : Modernizr.csstransforms, 
yep: ['../../lib/turn.js'], 
nope: ['../../lib/turn.html4.min.js'], 
both: ['css/basic.css'], 
complete: loadApp 
}); 








var html5_audiotypes={ //define list of audio file extensions 
"mp3": "audio/mpeg", 
"ogg": "audio/ogg", 
"wav": "audio/wav", 
} 
function createsoundbite(sound){ 
var html5audio=document.createElement('audio') 
if (html5audio.canPlayType){ //check support for HTML5 audio 
for (var i=0; i<arguments.length; i++){ 
var sourceel=document.createElement('source') 
sourceel.setAttribute('src', arguments[i]) 
if (arguments[i].match(/.(\w+)$/i)) 
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) 
html5audio.appendChild(sourceel) 
} 
html5audio.load() 
html5audio.playclip=function(){ 
html5audio.pause() 
html5audio.currentTime=0 
html5audio.play() 
} 
return html5audio 
} 
else{ 
return {playclip:function(){throw new Error("Your browser doesn't support   HTML5 audio unfortunately")}} 
} 
} 
//Initialize sound clips with 1 fallback file each: 
var flip=createsoundbite("YOURSOUND.ogg", "YOURSOUND.mp3","YOURSOUND.wav") 







when:{turning:flip.playclip()}; // add this line to library of turn js on   line no 
299 // when left 290// not good 

1218// perfect left flip  //same 1540 

1407// perfect corner on hover right 

1493// perfect right flip 

1511// per self closing 

1555// per on opening 

1575 //consider 



2810 only when lft mouse 


    or 


you can just only add audio file and play when turning with 
var vid = document.getElementById("myVideo"); 

function playVid() { 
vid.play(); 
} 

function pauseVid() { 
vid.pause(); 
} 
Problemi correlati