title: Magnific Popup Lightbox works in Ruby on Rails development but not when deployed to Heroku
body: <p>I have Magnific Popup installed in my Ruby on Rails (Ruby v2.2.1, Rails v4.1.8) application. The popup works wonderfully locally to zoom in on a single image but when deployed to Heroku just opens the image in the current tab.</p>
  
  <p>Magnific Popup was installed as follows:</p>
  
  <p>Gemfile:</p>
  
  <pre><code>gem 'magnific-popup-rails'
  </code></pre>
  
  <p>application.js:</p>
  
  <pre><code>//= require jquery
  //= require jquery.turbolinks
  //= require jquery_ujs
  //= require bootstrap-sprockets
  //= require ckeditor/init
  //= require syntax-highlighter-rails/shCore
  //= require syntax-highlighter-rails/shBrushBash
  //= require syntax-highlighter-rails/shBrushCss
  //= require syntax-highlighter-rails/shBrushJScript
  //= require syntax-highlighter-rails/shBrushPlain
  //= require syntax-highlighter-rails/shBrushRuby
  //= require magnific-popup
  //= require turbolinks
  //= require_tree .
  </code></pre>
  
  <p>application.css.scss:</p>
  
  <pre><code>@import "magnific-popup";
  </code></pre>
  
  <p>And some custom CSS from one of the examples on the Magnific website (below the import in application.css.scss):</p>
  
  <pre><code>/* padding-bottom and top for image */
  .mfp-no-margins img.mfp-img {
      padding: 0;
  }
  /* position of shadow behind the image */
  .mfp-no-margins .mfp-figure:after {
      top: 0;
      bottom: 0;
  }
  /* padding for main container */
  .mfp-no-margins .mfp-container {
      padding: 0;
  }
  
  /* 
  
  for zoom animation 
  uncomment this part if you haven't added this code anywhere else
  
  */
  
  .mfp-with-zoom .mfp-container,
  .mfp-with-zoom.mfp-bg {
      opacity: 0;
      -webkit-backface-visibility: hidden;
      -webkit-transition: all 0.3s ease-out; 
      -moz-transition: all 0.3s ease-out; 
      -o-transition: all 0.3s ease-out; 
      transition: all 0.3s ease-out;
  }
  
  .mfp-with-zoom.mfp-ready .mfp-container {
          opacity: 1;
  }
  .mfp-with-zoom.mfp-ready.mfp-bg {
          opacity: 0.8;
  }
  
  .mfp-with-zoom.mfp-removing .mfp-container, 
  .mfp-with-zoom.mfp-removing.mfp-bg {
      opacity: 0;
  }
  </code></pre>
  
  <p>I then have a custom JavaScript file named magnific-custom.js in app/assets/javascripts (also code taked from the example on Magnific’s website):</p>
  
  <pre><code>jQuery(function($){
  
      $('.image-popup-vertical-fit').magnificPopup({
          type: 'image',
          closeOnContentClick: true,
          mainClass: 'mfp-img-mobile',
          image: {
              verticalFit: true
          }
  
      });
  
      $('.image-popup-fit-width').magnificPopup({
          type: 'image',
          closeOnContentClick: true,
          image: {
              verticalFit: false
          }
      });
  
      $('.image-popup-no-margins').magnificPopup({
          type: 'image',
          closeOnContentClick: true,
          closeBtnInside: false,
          fixedContentPos: true,
          mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
          image: {
              verticalFit: true
          },
          zoom: {
              enabled: true,
              duration: 300 // don't foget to change the duration also in CSS
          }
      });
  
  });
  </code></pre>
  
  <p>And then for the HTML I have:</p>
  
  <pre><code>&lt;p style="text-align:center"&gt;&lt;a class="image-popup-no-margins" href="https://storage.googleapis.com/justinvrooman/uploads/article-content-imgs/nitrous-io.png" style="cursor: zoom-in;"&gt;&lt;img alt="" src="https://storage.googleapis.com/justinvrooman/uploads/article-content-imgs/nitrous-io.png" style="height:60%; width:60%" /&gt;&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Like I said, the Magnific Popup works wonderfully locally in my development environment but once deployed to Heroku it doesn’t work. Some things I have tried include:</p>
  
  <ol>
  <li><p>Tried moving the custom JavaScript into different locations.</p></li>
  <li><p>Compiled assets locally (and deployed to Heroku) using:</p>
  
  <p>RAILS_ENV=production bundle exec rake assets:precompile</p></li>
  <li><p>Made some config changes:</p>
  
  <p>config.assets.compile = (tried both true and false)</p>
  
  <p>config.serve_static_assets = (tried both true and false)</p></li>
  <li><p>Checked my page source to look for clues… Nothing.</p></li>
  <li><p>Googled about everything I can think of.</p></li>
  </ol>
  
  <p>At this point I am at a loss as to what I can try or how I can debug the issue as there is no indication of a problem.</p>