混合内容类型在宏伟的弹出

Mixed content type in magnific popup

本文关键字：类型 混合      更新时间：2023-09-26

我正在尝试使用像这样的华丽弹出框制作一个混合内容类型的灯箱画廊。

这是我的代码

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

但它不工作:(

有什么建议吗?

谢谢。

您错过了文档。上面的代码片段中有现成的函数。将代码封装在

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

并在你的锚标记中使用这个href=" data-mfp-src="img/pic1.jpg"

相关文章：