Question

我尝试使用像this这样的大胆弹出窗口制作混合内容类型的灯箱库。

这是我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

但它不起作用：（

是否有任何建议。

感谢。

Answer 1

您错过了上面代码段中的document.ready函数。将你的代码包装在

中

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

        });

并在锚标记中使用此href =“”data-mfp-src =“img / pic1.jpg”

混合内容类型在大胆的弹出窗口中

1 个答案: