Magnific Popup: application-3f3c3e8….js:15011Uncaught TypeError: Cannot read property 'open' of undefined

Question

I'm using this example for a gallery: https://codepen.io/dimsemenov/pen/zvLny

My app is Rails 5 and Turbolinks 5. I only get this error in production, not development.

When I click to open the gallery, I'm getting the error:

Uncaught TypeError: Cannot read property 'open' of undefined

Вот мой JS:

$(document).ready(function() {

  // image gallery lightbox
  $('.open-gallery-link').click(function(event) {
    //  event.preventDefault();
    var items = [];
    $($(this).attr('href')).find('.slide').each(function() {
      items.push( {
        src: $(this)
      } );
    });

    $.magnificPopup.open({
      items:items,
      gallery: {
        enabled: true
      },
      closeBtnInside: false

    });
  });

И мой HTML:

<a href="#gallery1" class="open-gallery-link">
  <div class="featured-img space-bottom-30" style="background-image: url(http://res.cloudinary.com/hdldnogif/image/upload/v1488230846/zk17kylcizbq9grz3eg8.jpg)">
 </div>
</a>

I tried wrapping my JS in $( document ).on('turbolinks:load', function() { } но получите ту же ошибку. Любая помощь приветствуется

Answer 1

Я думаю, что вы используете старый синтаксис. Попробуй это:

$(document).on('turbolinks:load', {
  // your code here
});

Answer 2

может кому поможет! Если вы минимизируете свой JS-код, то, скорее всего, для 'magnificPopup' есть короткое имя, у него сокращенное имя в 'scripts.min.js', поэтому в данном случае вы не можете найти 'magnificPopup' - это неопределенный.

Answer 3

Селектор вашего элемента неправильный

 $.magnificPopup.open

, Ваш селектор должен быть тегом привязки. Попробуйте с этим вместо этого:

$('.open-gallery-link').magnificPopup.open({});