重新初始化MagnificPopup

Question

I am trying to get Magnific Popup working after an AJAX success, but I seem to be failing. I believe that I need to reinitialize the magnificPopup and I have tried to do so, but still no luck. Anyway here is what I have so far.

AJAX:

            function getCoupons(){
            $.ajax({
                url : 'http://seansabour.net/getCoupons.php',
                type : 'get',
                dataType: "JSON",
                success : function(data, status) {
                    $('.carousel').slick("unslick"); /* ONLY remove the classes and handlers added on initialize */
                    $('.carousel').slick(slickCarousel()); /* Initialize the slick again */

                    $.each(data, function(i, item) {    
                        $(".carousel").append("<div class='col-sm-6 col-md-4'> \
                                            <div class='thumbnail'> \
                                                <div class='ads'>\
                                                    <a href='adc/img/" +  item.ad + "'><img id='" + item.ad + "' src='adc/img/" + item.ad + "' alt='...'></a>\
                                                </div>\
                                                <div class='caption text-center'>\
                                                <address><strong>" + item['companyName'] + "</strong><br/>" +
                                                item['companyAddr'] + "<br/>" +
                                                item['companyCity'] + ", CA " + item['companyZip'] + "<br/>\
                                                <abbr title='Phone'>P:</abbr> " + item['companyPhone'] + "<br/>\
                                                <a href='" + item['website'] + "'>" + item['website'] + "</a><br/>\
                                                <p><input type='button' onclick='printImage(\"adc/img/" + item['ad'] + "\")' class='btn btn-primary' value='Print' role='button'><a href='#' class='btn btn-default' role='button'>Email</a></p>\
                                                </div></div></div>");
                    });
                },
                complete : function(data, status) {//optional, used for debugging purposes
                    //alert(status);
                }
            });
        }
        function filterSearch() {
            $.ajax({
                url : 'http://seansabour.net/filter.php',
                type : 'get',
                data : {
                    "category" : $("#cat").val()
                },
                dataType: "JSON",
                success : function(data, status) {
                    if(data == "Not Found"){
                        $("#noCat").html("No coupons were found for this category. Please try a different category!");
                        $("#noCat").addClass("bg-danger");
                        getCoupons();
                    } else {
                        $(".carousel").html(" ");
                        $("#noCat").html(" ");
                        $("#noCat").removeClass("bg-danger");

                        $.each(data, function(i, item) {

                            $(".carousel").append("<div class='col-sm-6 col-md-4'> \
                                                <div class='thumbnail'> \
                                                    <div class='ads'>\
                                                        <a href='adc/img/" +  item.ad + "'><img id='" + item.ad + "' src='adc/img/" + item.ad + "' alt='...'></a>\
                                                    </div>\
                                                    <div class='caption text-center'>\
                                                    <address><strong>" + item['companyName'] + "</strong><br/>" +
                                                    item['companyAddr'] + "<br/>" +
                                                    item['companyCity'] + ", CA " + item['companyZip'] + "<br/>\
                                                    <abbr title='Phone'>P:</abbr> " + item['companyPhone'] + "<br/>\
                                                    <a href='" + item['website'] + "'>" + item['website'] + "</a><br/>\
                                                    <p><input type='button' onclick='printImage(\"adc/img/" + item['ad'] + "\")' class='btn btn-primary' value='Print' role='button'><a href='#' class='btn btn-default' role='button'>Email</a></p>\
                                                    </div></div></div>");
                        });
                    }

                },
                complete : function(data, status) {//optional, used for debugging purposes
                    //alert(status);
                }
            });
        }

JQuery:

        <script>
        jQuery(window).load(function(){
            activatePopup();

            // Plugin callback function
            jQuery(document).on("ads:ajaxfinish", ".ads", function(){
                activatePopup();
            });

            function activatePopup() {
                $('.ads').magnificPopup({
                    delegate: 'a',
                    // child items selector, by clicking on it popup will open
                    type: 'image'
                    // other options            
                });
            }
        });

If you can point me in the right direction I would appreciate it.

Thanks in advance!

Answer 1

try to use this after success ajax. I hope it's not too late. it worked for me.

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    }
});