Rails 3&花式盒子 [英] Rails 3 & FancyBox

问题描述

如果这似乎是一个愚蠢的问题，我刚刚开始尝试学习JS道歉，但是我有点迷失了.我从Flickr页面上抓取了一组图像，我决定添加一个灯箱以尝试使用JS，因此我从

I've just started trying to learn JS so apologies if this seems like a silly question, but I'm a bit lost. I've got a set of images I scrape off my Flickr page, I decided to add a lightbox on to try get some experience with JS, so I've installed it from the GitHub page, and followed the instructions to add to application.js:

//= require jquery
//= require fancybox

并添加到我的custom.css中:

And to add to my custom.css:

/*
 *= require_self
 *= require fancybox
 *= require_tree .
*/

然后我有:

<script type = "text/javascript">
$(document).ready(function() {

/* This is basic - uses default settings */

$("a.flickr_photo").fancybox({'type': 'image'});

 });
</script>

部分调用创建的一组图像:

In a partial, calling on a set of images which are created:

<%= link_to(image_tag(p.url, :class => 'flickr_photo', :title => p.title, :border => 0), p.url_photopage) %>

现在我有点卡住了，它实际上什么也没做，但是也没有出错，所以任何帮助都将非常棒！

Now I'm just a bit stuck, it doesn't really do anything, but it doesn't error either so any help would be really great!

推荐答案

您可能在Prototype的$标识符上遇到了冲突(我假设您没有摆脱标准的RoR Prototype代码) .原型是类似于jQuery的Javascript库，并且与RoR捆绑在一起.问题在于，它也使用$，就像jQuery一样，因此最终发生的结果是，每个$都被尝试作为Prototype函数或变量.这就是我在应用程序中修复它的方式，该应用程序使用jQuery滑块处理了一些图像:

You are probably getting a conflict on the $ identifier from Prototype (I'm assuming that you didn't get rid of the standard RoR Prototype code). Prototype is a Javascript library similar to jQuery and comes bundled with RoR. The problem is that it also uses the $, just like jQuery, so what ends up happening is every $ gets tried as a Prototype function or variable. This is how I fixed it in my app, which used a jQuery slider for some images:

• 在要在其他jQuery代码之前但在实际jquery.js文件之后加载的位置添加jQuery.noConflict();.查看首先加载哪个jQuery .js文件，然后将其放在文件的开头.
• 接下来，必须将您需要的所有jQuery代码从使用$更改为使用jQuery.在您喜欢的jQuery .js文件中的文本编辑器中使用查找/替换来完成此操作.
• 确保以后所有的jQuery代码都使用jQuery而不是$(即，用jQuery("#id_of_element").show();而不是$("#id_of_element").show();)

• add jQuery.noConflict(); in a place where it will be loaded ahead of other jQuery code, but after the actual jquery.js file. Look at which of your jQuery .js files get loaded first, and put it at the beginning of the file.
• Next, every bit of jQuery code that you have has to be changed from using $ to using jQuery. Use a find/replace in your favorite text editor on your jQuery .js files to accomplish this.
• Make sure all future jQuery code uses jQuery instead of $ (i.e., jQuery("#id_of_element").show(); instead of $("#id_of_element").show();)

您可能会发现，这会将jQuery标识符从$更改为jQuery，从而消除了Prototype中的冲突.如果我的诊断正确，那应该可以解决您的问题！

As you can probably figure out, this changes the jQuery identifier from $ to jQuery, which gets rid of the conflict from Prototype. If I was correct in diagnosis, that should fix your problem!

这篇关于Rails 3&花式盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！