Magnific Popup Lightbox 在 Ruby on Rails 开发中有效，但在部署到 Heroku 时无效

Question

我在我的 Ruby on Rails（Ruby v2.2.1、Rails v4.1.8）应用程序中安装了 Magnific Popup。弹出窗口在本地可以很好地放大单个图像，但是当部署到 Heroku 时，只会在当前选项卡中打开图像。

Magnific Popup 安装如下：

宝石文件：

gem 'magnific-popup-rails'

application.js：

//= 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 .

application.css.scss：

@import "magnific-popup";

以及来自 Magnific 网站上的示例之一的一些自定义 CSS（在 application.css.scss 中的导入下方）：

/* 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;
}

然后我在 app/assets/javascripts 中有一个名为 magnific-custom.js 的自定义 JavaScript 文件（代码也来自 Magnific 网站上的示例）：

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
        }
    });

});

然后对于我拥有的 HTML：

<p style="text-align:center"><a class="image-popup-no-margins" href="https://storage.googleapis.com/justinvrooman/uploads/article-content-imgs/nitrous-io.png" style="cursor: zoom-in;"><img alt="" src="https://storage.googleapis.com/justinvrooman/uploads/article-content-imgs/nitrous-io.png" style="height:60%; width:60%" /></a></p>

就像我说的，Magnific Popup 在我的开发环境中本地运行非常好，但是一旦部署到 Heroku，它就不起作用了。我尝试过的一些事情包括：

1. 尝试将自定义 JavaScript 移动到不同的位置。

2. 使用以下方法在本地编译资产（并部署到 Heroku）：

   RAILS_ENV=production bundle exec rake assets:precompile

3. 进行了一些配置更改：

   config.assets.compile =（真假都试了）

   config.serve_static_assets =（尝试了真假）

4. 检查了我的页面源以寻找线索……什么都没有。

5. 搜索所有我能想到的东西。

此时我不知道我可以尝试什么或如何调试问题，因为没有任何问题的迹象。

Answer 1

我不得不：

config.assets.precompile += %w( magnific-custom.js )

然后：

<%= javascript_include_tag "magnific-custom" %>

谁能解释为什么我必须明确地这样做才能使其正常工作？