jquery - 为图像添加灯箱

Question

我没有 CSS 和 JQuery 经验。因此，我对使用我的应用程序实现 Magnific Popup 感到迷失。我正在使用https://github.com/joshuajansen/magnific-popup-rails 。我在 View 中插入的代码显示在页面本身上。我按照 github 上的内容进行操作，然后将代码添加到 View 中。

<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 %>

Answer 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>