magnific-popup、ポップアップを開くとオーディオファイルを再生する方法とそれを閉じるときに再生を停止する

Question

magnific-popupを使って画像を表示しています... ポップアップウィンドウが開いているときにauオーディオファイルの再生を開始できますか？ウィンドウを閉じるときに停止しますか？

 <a href="images/capoeira.jpg" class="fh5co-project-item image-popup to-animate"> 
      <img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive"> 
      <div class="fh5co-text"> 
      <h1>ANIMA'SON</h1> 
      <span>Participants: minimum 10, maximum: 20</span> 
      </div> 
     </a> 

Answer 1

私は、各画像のポップアップリンク内

<a href="images/capoeira.jpg" data-sound="berimbau" class="fh5co-project-item image-popup to-animate"> 
     <img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive"> 
      <div class="fh5co-text"> 
       <h1>ANIMA'SON</h1> 
       <h2>60€/heure/groupe</h2> 
       <span>Participants: minimum 10, maximum: 20</span> 
      </div> 
      <audio id="berimbau-audio" loop="loop" preload="none"> 
       <source src="./sounds/berimbau.ogg" type="audio/ogg"> 
       <source src="./sounds/berimbau.mp3" type="audio/mpeg"> 
      </audio> 
    </a> 

をオーディオタグを追加し、データ・サウンドパラメータとオーディオを使用して、彼magnific-ポップアップoptions.jsへのコールバックを追加することによって、それを解決しました。 ID

$（ドキュメント）.ready（関数（）{ VaRのsoundName; のvar audioElement;

// MagnificPopup 
    var magnifPopup = function() { 
    $('.image-popup').magnificPopup({ 
    .... 
     callbacks: { 
     elementParse: function(item) { 
     soundName = item.el[0].attributes['data-sound'].value; 
     audioElement= document.getElementById(soundName + "-audio") 
     audioElement.load(); 
     }, 
     close: function() { 
     audioElement.pause(); 
     }, 
     change: function() { 
     audioElement.play(); 
     } 
    },