将灯箱添加到图像答案

【问题标题】：Adding light box to images将灯箱添加到图像
【发布时间】：2013-10-21 19:12:12
【问题描述】：

我没有使用 CSS 和 JQuery 的经验。因此，我在使用我的应用程序实现 Magnific Popup 时迷失了方向。我正在使用https://github.com/joshuajansen/magnific-popup-rails。我在视图中插入的代码显示在页面本身上。我关注了 github 上的内容，然后在视图中添加了代码。

<h1><%= @user.username %></h1>

<div class="parent-container">

$(document).ready(function() {
  $('.parent-container').magnificPopup({
    delegate: 'a',
    type: 'image'
  });   
});

<% @user.photos.each do |photo| %>
    <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>

</div>
<% end %>

【问题讨论】：

您需要添加标签<script type="text/javascript">，然后添加代码。最后关闭标签。检查乔希的答案。

标签： jquery css ruby-on-rails magnific-popup

【解决方案1】：

我对 ruby on rails 的了解相当有限，但我很确定您需要将您的 javascript 包含在脚本标记中，如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        $('.parent-container').magnificPopup({
            delegate: 'a',
            type: 'image'
        });   
    });
</script>

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

【讨论】：

谢谢。我在想。这相当简单易行。

【解决方案2】：

Josh Mein 的回答是正确的，但要忠于 w3c 标准并牢记 javascript，您还可以考虑：

<% content_for :head do %>
  <script type='text/javsacript'>
    $(document).ready(function() {
      $('.parent-container').magnificPopup({
        delegate: 'a',
        type: 'image'
      });   
    });
  </script>
<% end %>

...然后在你的布局中确保你在头部有<%= yield :head %>

【讨论】：