2015-02-20 10 views
5

Ich möchte einen Sound-Effekt hinzufügen, wenn eine Seite mit dem turn.js jquery-Plugin gedreht wird. Der erste Schritt wäre also, die Funktion zu testen, die der Online-Dokumentation entspricht. So sollte der Code so etwas wie sein:turn.js füge Ton hinzu, wenn die Seite gedreht wird

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

Aber die Sache ist nichts geschieht in der Entwicklerkonsole. Keine Warnung, nichts.

+0

Vielleicht versuchen Sie Ihre „loadApp“ -Funktion ausgeführt wird, bevor das DOM gebaut. – Pointy

Antwort

3

setzen Sie Ihren Kern in dem Dokument bereit Abschnitt oder führen Sie Ihre Funktion

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

Dank!

+0

danke für die Einsicht, aber das Problem war die Tatsache, dass in der Online-Dokumentation das "#flipbook" als ID referenziert wurde, während es in meinem Projekt als ".flipbook" bezeichnet wurde, eine Klasse. Mein Fehler. –

6

Es ist nur der Wähler nicht die richtige verwendet wird, ist - beachten Sie den Unterschied zwischen .flipbook und #flipbook

dieses

$(".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(); 
} 
Verwandte Themen