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

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 Getting Started руководства:

Добавить атрибут данных лайтбокса любой ссылку изображений для включения осветителя. Для значения атрибута используйте уникальное имя для каждого изображения. Например: Изображение # 1

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

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

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