Question

我需要将与特定点击图像相关的rails变量传递到其灯箱容器中。

我正在将所有媒体上传内容输出到我的_content.html.erb布局中

<% @media_uploads.each do |media_upload| %>
<%= media_upload.title %>
<%= media_upload.user.username unless media_upload.user.nil? %>
<%= media_upload.description %>

当我点击任何图像时，我正在从我的application.js初始化大量弹出窗口

$('.box p a').magnificPopup({
  type:'image',
  image: {
    markup: '<div class="mfp-figure">'+'<div class="mfp-close"></div>'+
    '<div class="mfp-box-top">//username, title?</div>'+
    '<div class="mfp-img">//this is where the picture is rendered</div>'+
    '<div class="mfp-box-bottom">//description?</div>'+
    '</div>'+'</div>', 
  }
});

如何将变量从rails传递到magnific标记？我想在相应的弹出窗口中显示相应的用户，标题和描述（以及其他内容） - 在mfp-box-top和mfp-box-bottom div中。

感谢您提供任何提示或技巧！

Answer 1

您必须在客户端上解决此问题。最简单的方法是将此信息另外呈现为链接上的“data-”属性或其他一些html元素：

 <a href='nice.img' data-title='nice', data-user-name='chuck', data-descrption='lorem impsum' />

然后在maginific初始化程序中以通用方式查询此信息。

    $('.box p a').magnificPopup({
    type:'image',
    image: {
      markup: ...
      '<div class="mfp-box-top">' + $(this).attr('data-title') + '</div>'
      ...
      }
    });

将rails变量传递给javascript灯箱弹出窗口

1 个答案: