Question

我遇到了一个我无法弄清楚的奇怪问题。我制作了一个模态图库，当我直接进入链接时，一切正常，就是我在浏览器栏http://localhost:3000/gallery中输入并按回车键。

图库工作正常，但是当我通过单击导航栏上的图库链接从主页导航到图库时，它不能完全正常工作，因为模式的片段由于某种原因不会加载。没有文件上传，没有，只是服务器上的静态图像，现在我想要显示。

我在哪里犯这样的错误？

我一直在关注这个教程/ jquery插件来执行此操作：

https://github.com/michaelsoriano/bootstrap-photo-gallery

以下是我猜的最重要的部分：

静态页面gallery.html.erb：

<% provide(:title, "Gallery") %>
<h1>Gallery</h1>
<div class="container photos">
  <ul class="first">
      <% @photos.each do |photo|%>
        <li>
          <img src="<%= image_path(photo) %>" style="max-height: 150px !important; min-height: 150px;">
        </li>
      <% end %>
  </ul>
</div>

以下是我在application.js中放置的代码部分，它负责模式的工作：

$(document).ready(function(){
  $('ul.first').bsPhotoGallery({
    "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
    "hasModal" : true
  });
});

以下是我在标题导航栏中放置的图库链接：

<li><%= link_to "Gallery", gallery_path %></li>

在routes.rb中，我只放置了：

get 'gallery' => 'static_pages#gallery'

我觉得js代码应该以某种方式被操纵/放在其他地方，以便在直接进入链接或从主页导航到图库时都可以工作。但是我没有线索和/或为什么会这样发生。

如果您需要更多信息，请告诉我们。

Answer 1

好吧，看起来我找到了一个解决方案，但我不确定这是否是“正确”的方法，但是它有效！

所以我做的是将javascript部分更改为：

jQuery(document).on('ready page:load', function() {
  $('ul.first').bsPhotoGallery({
    "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
    "hasModal" : true
  });
});

现在，当直接访问网址或从其他网页导航时，它既有效又有效：）

我希望有一天这会对某人有所帮助！

从导航栏转到子页面时，模态库无法工作，但直接通过URL

1 个答案: