Question

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

Magnific Popup安装如下：

的Gemfile：

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它就无法工作。我尝试过的一些事情包括：

尝试将自定义JavaScript移动到不同的位置。
使用以下编译资产（并部署到Heroku）：

RAILS_ENV =生产包exec rake资产：预编译
进行了一些配置更改：

config.assets.compile =（尝试了true和false）

config.serve_static_assets =（尝试了true和false）
检查我的页面来源以寻找线索......没什么。
用Google搜索我能想到的一切。

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

Answer 1

我必须：

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

然后：

<%= javascript_include_tag "magnific-custom" %>

任何人都可以解释为什么我必须明确地这样做才能让它发挥作用吗？

Magnific Popup Lightbox适用于Ruby on Rails开发，但在部署到Heroku时则不行

1 个答案: