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

Question

我将这个示例用于画廊：https://codepen.io/dimsemenov/pen/zvLny

我的应用是 Rails 5 和 Turbolinks 5。我只在生产中遇到此错误，而不是在开发中。

当我点击打开图库时，出现错误：

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>

我尝试将我的 JS 包装在 $( 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({});