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

Posted 2023-05-09

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

【英文标题】：Magnific Popup Lightbox works in Ruby on Rails development but not when deployed to Heroku

【发布时间】：2015-05-27 17:17:37

【问题描述】：

我在我的 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  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=production bundle exec rake assets:precompile

进行了一些配置更改：

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

config.serve_static_assets =（尝试了真假）

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

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

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

【参考方案1】：

我不得不：

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

然后：

<%= javascript_include_tag "magnific-custom" %>

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