title: Magnific Popup: application-3f3c3e8….js:15011Uncaught TypeError: Cannot read property 'open' of undefined
body: <p>I'm using this example for a gallery: <a href="https://codepen.io/dimsemenov/pen/zvLny" rel="nofollow noreferrer">https://codepen.io/dimsemenov/pen/zvLny</a></p>
  
  <p>My app is Rails 5 and Turbolinks 5. <strong>I only get this error in production, not development.</strong> </p>
  
  <p>When I click to open the gallery, I'm getting the error: </p>
  
  <p><code>Uncaught TypeError: Cannot read property 'open' of undefined</code></p>
  
  <p>Here's my js: </p>
  
  <pre><code>$(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
  
      });
    });
  </code></pre>
  
  <p>And my html:</p>
  
  <pre><code>&lt;a href="#gallery1" class="open-gallery-link"&gt;
    &lt;div class="featured-img space-bottom-30" style="background-image: url(http://res.cloudinary.com/hdldnogif/image/upload/v1488230846/zk17kylcizbq9grz3eg8.jpg)"&gt;
   &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I tried wrapping my JS in <code>$( document ).on('turbolinks:load', function() { }</code>  but get the same error. Any help is appreciated</p>