0

在每个用户配置文件(localhost:3000/users/username)上,都有一个用户发布的帖子列表。我实现了 facebox,它是一个基于 jQuery 的灯箱,可以在点击时显示图像。这是我为此使用的代码:

<a href=<%= post.image_url %> rel="facebox"><%= image_tag post.image_url(:thumb).to_s %></a>

问题是,如果用户发了 5 篇帖子,同一张图片在点击后会重复 5 次以显示在 Facebook 框中。

这是我在 @posts 中呈现的 show.html.erb

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="span4">
    <section>
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
       <br>
  </aside>
 <br>


  <div class="span10">
    <%= render 'follow_form' if signed_in? %>
    <% if @user.posts.empty? %>
<h3>Browse</h3>
<% end %>
    <% if @user.posts.any? %>
      <ol class="posts">
        <%= render @posts %>

      </ol>

      <%= will_paginate @posts %>
    <% end %>
  </div>
</div>

这是 _post.html.erb

<script src="/jquery.js" type="text/javascript"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/src/facebox.js" type="text/javascript"></script> 
<script language="javascript">

 jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
}) 

</script>


    <li>
      <span class="content"><%= simple_format(post.content) %></span>
      <% if post.image.present? %>
      <a href=<%= post.image_url %> rel="facebox"><%= image_tag post.image_url(:thumb).to_s %></a>
      <br>
      <% else %>
      <% end %>
      <span class="timestamp">
        Posted <%= time_ago_in_words(post.created_at) %> ago.
      </span>
</li>
4

3 回答 3

0

我认为 Facebook 会自动对图像进行分组,因为它们都具有相同的“rel”属性。

尝试这样的事情:

<%= link_to post.image_url, :rel => "facebox-#{post.id}" do %>
  <%= image_tag post.image_url(:thumb).to_s %>
<% end %>
于 2013-03-13T19:54:11.440 回答
0

_post.html.erb每个帖子都包含并执行一次javascript 。因此,如果用户有 5 个帖子,您将初始化 facebox 5 次。将脚本标签移出部分。相反,将它们放入其中,show.html.erb以便它们仅在整个页面中执行一次。

于 2013-03-13T20:17:12.823 回答
0

如果还是不走运,请尝试删除 rel 属性并根据类名调用 facebox:

<%= link_to post.image_url, :class => "facebox" do %>
  <%= image_tag post.image_url(:thumb).to_s %>
<% end %>

和javascript:

$('a.facebox').facebox() 
于 2013-03-13T22:41:03.710 回答