Лайтбокс с рельсами

Question

Поэтому я пытаюсь использовать Lightbox2 в своем приложении. Я установил гем и выполнил все шаги, но не мог понять, где его вызвать в приложении.

Это мой почтовый индекс

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

Добавьте атрибут data-lightbox к любой ссылке на изображение, чтобы включить Lightbox. Для значения атрибута используйте уникальное имя для каждого изображения. Например: изображение № 1

Когда Lightbox инициализируется, он ищет любые теги изображений, которые содержат data-lightbox атрибут и привязывает свои обработчики к ним. Вам необходимо предоставить этот атрибут:

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

Это должно заставить Lightbox подобрать ваши изображения.