混合內容類型在magnific popup

Question

我試圖使用像this這樣的大型彈出式菜單來製作混合內容類型的燈箱圖庫。

這裏是我的代碼

$(".mixed-type").on("click", function() { 
 

 
     var data_type = $(this).attr("data-type"); 
 

 
     $(".mixed-type").magnificPopup({ 
 
      disableOn: 700, 
 
      type: data_type, 
 
      mainClass: "mfp-fade", 
 
      removalDelay: 160, 
 
      preloader: false, 
 
      fixedContentPos: true, 
 
      callbacks: { 
 
       beforeOpen: function() { 
 
        this.st.mainClass = this.st.el.attr("data-class") 
 
       } 
 
      } 
 
     }); 
 
    });

<div class="book-inner"> 
 
    <img src="img/thumb/pic1.jpg" alt=""> 
 
    <div class="book-hover"> 
 
     <ul class="preview-link blue"> 
 
      <li> 
 
       <a title="First image title" href="img/pic1.jpg" class="mixed-type" data-effect="mfp-zoom-in" data-type="image">+</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<div class="book-inner"> 
 
    <img src="img/thumb/pic2.jpg" alt=""> 
 
    <div class="book-hover"> 
 
     <ul class="preview-link blue"> 
 
      <li> 
 
       <a title="Second image title" href="//w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/79509752&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true" class="popup-iframe audio" data-effect="mfp-zoom-in" data-class="audio" data-type="irfame"><i class="fa fa-headphones"></i></a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

，但它的工作不是:(

有任何建議。

感謝。

Answer 1

你錯過了文件。就緒功能在ab Ove代碼片段。包裹裏面

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

     }); 

你的代碼，並在你的錨標記使用HREF = 「」 數據MFP-SRC = 「IMG/pic1.jpg」