Ruby on rails 3.1 Rails 3.1-Fancybox

我正在尝试让fancybox（技术上是fancybox rails）在rails 3.1中工作。我从这里的方向开始。。。过了一段时间，我发现我需要补充

<%= javascript_include_tag :application %>

在这里尝试一些不同的事情，但似乎没有一件能起到多大作用。我还在html中添加了以下内容，只是为了简化Rails的内容

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

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

/*
 * 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。所以我相信它就在那里

所以。。。有人想试试吗？

如果您正在使用：

<a class="single_image" ....

但是，如果使用rails设置不同的类（例如“fancybox”），则如下所示：

---

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

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

管道将内容缩小和压缩与文件连接结合起来，为javascript和CSS提供一个文件，供生产中使用。此外，管道在提供服务的文件名中使用指纹。阅读一下Rails，因为这很好地解释了为什么指纹识别很有用

现在谈谈你的具体问题

Fancybox通过在图像链接上附加一个点击处理程序来工作，这会驱动弹出行为

如果您单击一个图像，它会显示完整大小的图像，这意味着fancybox尚未将自身连接到链接

我可以在你的代码中看到你在链接上使用了类“single_image”。您发布的Javascript代码段需要类“fancybox”。（肯尼迪有另一个答案）

您需要更改它们以匹配

javascript代码段本身应该在application.js文件中

要使CSS为此工作，您还需要将应用程序CSS包含到布局中：

stylesheet_link_tag "application", :media => "all" javascript_include_tag "application" 样式表\链接\标记“应用程序”，：媒体=>“全部” javascript_include_标记“应用程序”

---

谢谢有了这个和Richard关于CSS的提示，它现在开始工作了。哦，不同的类名是为了尝试从fancybox站点获取示例。我真的知道我在那里做什么至少；-）。Richard，谢谢你和JFK的帮助，现在开始工作了。我没有意识到资产管道是一个性能问题。我将阅读更多的链接（我在尝试让一切正常工作时确实浏览了一些），以获得更好的感觉。不过，我要说的是，对于新手来说，这不是“约定优先于配置”。看起来（对我来说）里面有相当多的魔法，就像大多数魔法一样，当它起作用的时候是很棒的，但是当它不起作用的时候，试着去弄清楚它可能是相当令人沮丧的。哦，正如我所说的，非常感谢您的帮助，非常感谢。我认为他们认为一个清单将适用于95%的用例，在这种情况下，它就是有效的。这是一个相当大的飞跃到下一个层次，如果你正在升级一个复杂的项目，它更难。但最终值得付出努力。很高兴我能帮忙！

/*
 * 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
 */

<a class="single_image" ....

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

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

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

stylesheet_link_tag "application", :media => "all" javascript_include_tag "application"