Magnific popup does not work on second page of Datatables

I have created a datatables and add an image column into datatables. When i click image, i would like to image open at popup. It is work on for first page of datatable, however when i passed to second page, it doesn’t work. Also i put alert() to test second page event and alert() works, but popup does not.

Please check my snippets: https://jsfiddle.net/f08qdeq2/20/

How can i solve this problem, any ideas? Thank You

 $(document).ready(function() {
  var table = $('#datatable').dataTable({
    aLengthMenu: [
      [1, 2],
      [1, 2]
    ],
    iDisplayLength: 1
  });
});

$(this.document).ready(function() {

  $('.image-popup').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,

    image: {
      verticalFit: true
    },
    zoom: {
      enabled: true,
      duration: 300 // don't foget to change the duration also in CSS
    },

  });

});

$(document).on('click', '.image-popup', function() {

  alert('You Clicked Image');

  //$('.image-popup-no-margins').magnificPopup({
  //Some Working code here
   //});
})

Answer

You should use fnDrawCallback for initialize your popup. try this…

$(document).ready(function() {


var table = $('#datatable').dataTable({
aLengthMenu: [
  [1, 2],
  [1, 2]
],
iDisplayLength: 1,
"fnDrawCallback": function () {
    $('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,

image: {
  verticalFit: true
},
zoom: {
  enabled: true,
  duration: 300 // don't foget to change the duration also in CSS
},

});
}
});
});


$(document).on('click', '.image-popup', function() {

     alert('You Clicked Image');
})

Result : https://jsfiddle.net/cmedina/f08qdeq2/21/

Leave a Reply

Your email address will not be published. Required fields are marked *