Question

我的应用程序上有一个很棒的弹出窗口，我需要帮助才能在灯箱中添加动作。我已将我的代码添加到javascript及其外部，但它从未出现在灯箱内。

我需要在lighbox中添加几个部分，例如允许用户创建ProfileImage的链接，消息撰写框和用户的简短生物。如果我能学会怎么做，那么我相信我可以做其余的事。

操作为<%= button_to('Set as Profile Image', [:avatar, @photo]) %>

show.html.erb：

<h1><%= @user.username %></h1>
<script type="text/javascript">
    $(document).ready(function() {
        $('.parent-container').magnificPopup({
            delegate: 'a',
            type: 'image',
gallery:{enabled:true}
        });   
    });


</script>


<div class="parent-container">
    <% @user.photos.each do |photo| %>
        <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<% end %></div></p>

Answer 1

告诉Magnific Popup打开inline content（包含图片和额外内容的div），例如：

<script>
$(document).ready(function () {
    $('.parent-container').magnificPopup({
        delegate: 'a',
        type: 'inline',
        gallery: { enabled: true }
    });
});
</script>

<div class="parent-container">
    <% @user.photos.each do |photo| %>
        <%= link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo) %>
        <div id="<%= dom_id(photo) %>" class="mfp-hide">
            <%= image_tag(photo.image_url) %>
            <%= button_to('Set as Profile Image', [:avatar, @photo]) %>
        </div>
    <% end %>
</div>

你需要设置弹出窗口的样式;上面的文档链接有一些示例CSS。

（如果Ruby代码被破坏，我会道歉;我不是真正的RoR人员。）

Answer 2

根据magnific popup documentation，您可以在弹出窗口中加载任何您想要的内容（我认为它可能只是一个仅限图像的“灯箱”插件）

这意味着如果您在弹出窗口中放置所需的代码，您应该能够用它做你想做的事情：

<div class="parent-container">
    <% @user.photos.each do |photo| %>
        <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
        <%= button_to('Set as Profile Image', profile_path(photo)) %>
    <% end %>
</div>

如何添加到Magnific Popup javascript的链接

2 个答案: