混合內容類型在放大的彈出窗口中

Question

我正在嘗試使用像這樣的宏彈出框來制作混合內容類型的燈箱畫廊。

這是我的代碼

  $(".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

您錯過了上述代碼片段中的document.ready函數。 將您的代碼包裝

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

        }); 

並在定位標記中使用此href =“” data-mfp-src =“ img / pic1.jpg”