Question

我是初学者，试图在我的rails网站中实现Lightbox图库。我下载并遵循Lightbox site中的指南以及我在YouTube上发现的其他想法。图像在行中按预期显示，但在单击图像时，只需在同一选项卡中打开（即不使用灯箱功能，不在全屏导航中）。我试图理解一个类似的问题here，但我不理解那里使用jquery如何与手头的情况有关。

在控制台中，我发现以下错误，但我不确定如何使用它来解决问题：ActionController::RoutingError (No route matches [GET] "/lightbox-plus-jquery.js")

我的application.html.erb如下所示：

<!DOCTYPE html>
<html>
<head>
  <title><%= full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="lightbox.css" rel="stylesheet">
</head>
<body>
  <% if controller.controller_name == 'spanish_pages' %>
    <%= render 'layouts/spanish_header' %>
  <% elsif controller.controller_name == 'english_pages' %>
    <%= render 'layouts/english_header' %>
  <% end %> 

  <div class="container">
    <div class="jumbotron">
      <%= yield %>
    </div>
    <%= render 'layouts/footer' %>
  </div>

</body>
</html>

用于图库的页面是：

<% provide(:title, "Imágenes") %>

<div class="container">
  <h1>Imágenes</h1>
  <div class="gallery">
    <div class="row">
      <div class="col-lg-3">
        <a href="pp1.jpg" data-title="my first caption" data-lightbox="pp">
          <img src="pp1.jpg" width="200px" class="img-thumbnail">
        </a>
      </div>
      <div class="col-lg-3">
        <a href="pp2.jpg" data-title="my second caption" data-lightbox="pp">
          <img src="pp2.jpg" width="200px" class="img-thumbnail">
        </a>
      </div><div class="col-lg-3">
        <a href="pp4.jpg" data-title="my third caption" data-lightbox="pp">
          <img src="pp4.jpg" width="200px" class="img-thumbnail">
        </a>
      </div><div class="col-lg-3">
        <a href="pp5.jpg" data-title="my fourth caption" data-lightbox="pp">
          <img src="pp5.jpg" width="200px" class="img-thumbnail">
        </a>
      </div>
    </div> <!---row1 ends -->
  </div>
</div>

<script src="assets/javascripts/lightbox-plus-jquery.js"></script>

我还将assetsbox-plus-jquery.js添加到assets / javascripts /，并将lightbox.css（重命名为lightbox.css.scss）添加到assets / stylesheets。任何帮助将不胜感激！

图片库无法加载（灯箱）

0 个答案: