Filmroll with magnific popup

[ghost]

Have a problem to init filmroll when popup open. First time loading normal, but when i'm try to open popup second time, slider crashed. I'm using magnific popup callback:

$.magnificPopup.open({
items: {
type: 'inline',
src: '#gallery-popup',
},
callbacks: {
open: function() {
var popupGallery = new FilmRoll({
container: '#photo-slide',
pager: false,
next: '.slider-photo-wrap .next',
prev: '.slider-photo-wrap .prev',
height: 500,
scroll: false,
configure_load: true,
});
}
},
})

Screenshots:
Loading 1 time: http://take.ms/U5dUi
Loading this popup another time (crashed): http://take.ms/BYL3a

[straydogstudio]

In short, you are instantiating FilmRoll more than once. So the markup is being generated twice. Right now FilmRoll does not detect if it has been instantiated already, which it probably should. I would keep track of it, and only create the new film roll if you haven't opened this popup before. Something like:

open: function() {
  if (window.popupGallery == undefined) {
    window.popupGallery = new FilmRoll({...});
  }
}

Using a global on window will only work for one gallery, and it isn't the best practice. But it will work in a simple case.

[straydogstudio]

Did you have any luck with this?