Question

在发布此问题之前，我尝试搜索答案无济于事。我想要完成的事情看起来相当简单，但答案却避开了我。我正在使用fancybox生成图像库的模态窗口，图像存储在我的postgres数据库中的建模模型下（对于糟糕的命名约定而言）。以下是我目前正在运行的代码片段：

<div class="row small-11 small-centered columns">
 <% @modelings.each do |modeling| %>
  <a class="fancybox" rel="group" href="<%= modeling.image %>">
   <div class="small-11 small-centered columns banner" id="banner1">
    <h1>EXPRESSIONS</h1>
   </div>
  </a>
 <% end %>
</div>

我正在使用ZURB的基础，它不应该与fancybox有任何问题（至少我认为）。 <div ... id="banner1">是我要点击触发fancybox的模态窗口的div。这个div包含通过我的CSS渲染的图像。

#banner1 {
 background: url(banner.jpg) no-repeat center -280px fixed;
 height: 150px;
 width: 100%;
 margin-top: 80px;
}

现在出于测试目的，我已经通过carrierwave上传了4张图片并存储在我的数据库中，并通过实例变量@modelings进行调用。当我使用.each方法时，问题就出现了。它将创建<div ... id="banner1">中的4个，这不是我想要的。

我要做的是拥有1 <div ... id="banner1">，当点击时，模态窗口会弹出一个存储在其中的所有图像的图库。我试过玩ERB的位置，但似乎无法做到正确。

Answer 1

好像你正在重复<div class="small-11 small-centered columns banner" id="banner1">中的ID。并且因为fancybox无法识别要加载的图像。

尝试使id动态化，例如

<div class="small-11 small-centered columns banner" id="banner<%= modeling.id %>">并相应地调用java脚本

在我的rails应用程序中，Fancybox没有与ERB正常循环

1 个答案: