Question

所以我试图在我的应用程序上使用Lightbox2。我安装了gem并按照所有步骤进行操作，但无法确定在应用程序中调用它的位置。

这是我的帖子索引

<div class="container">
 <div id="profuploads">
  <div id="posts" class="transitions-enabled">
   <% @posts.each do |post| %>
   <div class="box panel panel-default">
    <%= link_to image_tag(post.image.url(:medium)), post %>
    <div class="panel-body">
     <strong><%= post.user.username if post.user %></strong><br/>
     <%= post.description %>
     <% if post.user == current_user %>
      <div class="actions">
        <%= link_to 'Edit', edit_post_path(post) %>
        <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
      </div>
    <% end %>
    </div>
  </div>
 <% end %>
</div>
</div>
</div>

这是我的帖子

<div class="row">
 <div class="col-md-offset-1 col-md-10">
  <div class="panel panel-default">
   <div class="panel-heading center">
    <%= image_tag @post.image.url, height: '300' %>
   </div>
  <div class="panel-body">

    <p><strong><%= link_to(@post.user.username.capitalize, user_path(@post.user.id)) if @post.user %></strong></p>
    <p><%= @post.description %></p>

    <div class="votes">
      <strong>VIEWS</strong>
    <%= @post.hits %>
      <div class="votes">
      <%= link_to like_post_path(@post), method: :put do%>
        <button type="button" class="btn btn-info" aria-label="Left Align">
          <span class="glyphicon glyphicon-thumbs-up glyphicon-align-center" aria-hidden="true"></span>
          <span class="badge"><%= @post.get_upvotes.size %></span>
          </button>
          <%end%>
          </div>
    <% if @post.user == current_user %>
     <%= link_to 'Edit', edit_post_path(@post) %>
    <% end %>

  </div>
</div>
</div>
</div>

使用Lightbox，我需要完全摆脱我的帖子显示页面吗？

Answer 1

Lightbox是一个javascript库，需要适当的html标记才能完成它的工作。您的show视图看起来不错，但不包括Lightbox查找的标记。

来自Lightbox Getting Started指南：

将数据灯箱属性添加到任何图片链接以启用Lightbox。对于属性的值，请为每个图像使用唯一的名称。例如：图片＃1

当Lightbox初始化时，它会查找包含data-lightbox属性的任何图像标记，并将其处理程序挂钩到它们。您需要提供以下属性：

<%= image_tag @post.image.url, height: '300', "data-lightbox" => @post.image.url %>

这应该让Lightbox拿起你的图像。

带有导轨的灯箱

1 个答案: