Смешанный тип контента во всплывающем окне Magnific

Я пытаюсь создать галерею лайтбоксов со смешанным типом контента, используя большое всплывающее окно, например 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>

но не работает :(

есть ли какие-либо предложения.

Спасибо.


javascript jquery magnific-popup
person M Salauddin Morshed    schedule 15.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы пропустили функцию document.ready в приведенном выше фрагменте кода. оберните свой код внутри

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

        });

и используйте этот href="" data-mfp-src="img/pic1.jpg" в теге привязки

person Nishith Kant Chaturvedi    schedule 15.09.2015
comment
Я уже упаковал свой код $(function(){ "use strict"; }); - person M Salauddin Morshed; 15.09.2015