Реинициализировать MagnificPopup

Я пытаюсь заставить Magnific Popup работать после успеха AJAX, но, похоже, у меня ничего не получается. Я считаю, что мне нужно повторно инициализировать MagnificPopup, и я пытался это сделать, но все равно не повезло. Во всяком случае, вот что я имею до сих пор.

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
});
}
});

Если вы можете указать мне правильное направление, я был бы признателен.

Заранее спасибо!

1

Решение

Попробуйте использовать это после успеха AJAX. Надеюсь, еще не поздно. это сработало для меня.

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

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]