Magnificポップアップ：アプリケーション3f3c3e8 ...の.js：15011UncaughtはTypeError：プロパティを読み取ることができません。私はギャラリーのために、この例を使用してい未定義

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> 

私は$(document).on('turbolinks:load', function() { }で私のJSをラップしようとしましたが、同じエラー。どんな助けもありがたいです

Answer 1

私はあなたが古い構文を使用していると思います。あなたの要素のセレクタが

$.magnificPopup.open 

間違っている

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

Answer 2

：これを試してみてください。セレクタはアンカータグでなければなりません。代わりにこれを試してみてください：

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