Rails 3.1 - Fancybox

Question

我正在尝试让 fancybox（技术上是 fancybox-rails）在 Rails 3.1 中工作。我从这里的指示开始...https://github.com/hecticjeff/fancybox-rails，然后在很长一段时间后发现我需要添加

<%= javascript_include_tag :application %>

为了让事情顺利进行（顺便说一句，为什么新的资产管道比将 javascript 文件放在已知目录中并使用 javascipt_include_tag 更好？）。无论如何，现在我不太确定该怎么做。首先是fancybox 的css 文件。这是否已经包括在内？我是否必须为资产管道做与上述类似的事情（我相信它也应该处理 css 文件）。最后，这是我想要的“灯箱”...

<% @image_files.each do |image_file_name| %>
    <%=link_to(image_tag image_file_name, :class=>"fancybox", :size => "200x200") %>
<% end %>

我在 image_file_name 指向的目录中有一些图像 (jpg)。这些显示得很好，但我希望能够单击它们并获得灯箱效果。那么……我的 link_to/image_tag 需要是什么样的？

我还有什么遗漏吗？

-------添加信息--------

我不应该为此有一些 javascript ...

$(document).ready(function(){
    // $("a img.fancybox").fancybox({'type': 'image'});
    a#single_image").fancybox({'type': 'image'});
    // $("$("a:has(img)").fancybox();
});

在这里尝试了一些不同的东西，但似乎都没有多大作用。我还在 html 中添加了以下内容，只是为了简化 Rails 的内容...

<a class="single_image" href="/assets/card_images/birthday_cake.jpeg"><img src="/assets/card_images/birthday_cake.jpeg" alt=""/></a>

图像显示，但当我点击它时，它只是转到显示图像的页面。我也检查了一下，看起来 css 是基于这个...

puts Rails.application.assets['jquery.fancybox.css'].body

这给了我一些从这个开始的东西......

/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 * 
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 * 
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

后面跟着一堆css。所以我相信它就在那里。

那么……有人有什么要尝试的吗？

Answer 1

如果您正在使用：

<a class="single_image" ....

那么你的脚本应该是：

$(document).ready(function(){
 $("a.single_image").fancybox({'type': 'image'});
});

但如果你使用 rails 设置不同的类（例如“fancybox”），例如：

<% @image_files.each do |image_file_name| %>
    <%=link_to(image_tag image_file_name, :class=>"fancybox", :size => "200x200") %>
<% end %>

那么 js 脚本应该匹配选择器的类：

$(document).ready(function(){
 $("a.fancybox").fancybox({'type': 'image'});
});

Answer 2

我将首先回答您的问题：“为什么新的资产管道比将 javascript 文件放在已知目录中并使用 javascipt_include_tag 更好？”

管道是 Rails “默认快速”策略的一部分。旧的做事方式 - 链接每个文件 - 导致多次下载并且比只有一个文件慢。旧方法没有压缩（缩小）文件内容，增加了下载大小（和页面速度）。

Pipeline 将内容缩小和压缩与文件连接相结合，为您提供用于生产中的 javascript 和 CSS 的单个文件。除此之外，管道在提供的文件名中使用指纹。阅读 Rails asset pipeline guide，因为这很好地解释了指纹识别为何有用。

现在谈谈您的具体问题。

Fancybox 通过将点击处理程序附加到图像链接来工作，这会驱动弹出行为。

如果您单击图像并显示全尺寸图像，这意味着fancybox 尚未附加到链接。

我可以在您的代码中看到您在链接上使用了“single_image”类。您发布的 Javascript sn-p 需要“fancybox”类。 （因为肯尼迪有其他答案）

您需要更改它们以匹配。

javascript sn-p 本身应该在 application.js 文件中。

要让 CSS 发挥作用，您还需要将应用程序 CSS 包含到您的布局中：

stylesheet_link_tag "应用程序", :media => "all" javascript_include_tag "应用程序"