1

我将此示例用于画廊：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() { } 但得到了同样的错误。任何帮助表示赞赏

4

3 回答 3

0

我认为您使用的是旧语法。尝试这个：

$(document).on('turbolinks:load', {
  // your code here
});
于 2017-03-03T18:28:14.177 回答
0

也许它会帮助某人！如果你确实缩小了你的 JS 代码，那么很可能有一个“magnificPopup”的短名称，它在“scripts.min.js”中具有缩短的名称，这就是为什么在这种情况下你找不到“magnificPopup” - 它是不明确的。

于 2021-02-05T18:14:53.503 回答
-1

您的元素的选择器错误

 $.magnificPopup.open

. 您的选择器应该是锚标记。试试这个：

$('.open-gallery-link').magnificPopup.open({});
于 2017-03-04T02:48:51.583 回答