在AJAX成功后，我试图让Magnific Popup正常工作，但我似乎失败了。我认为我需要重新初始化amplificPopup，我已经尝试过了，但仍然没有成功。不管怎样，这就是我到目前为止所拥有的。
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
});
}
});
如果你能给我指明正确的方向，我将不胜感激
提前感谢！
在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
}
});