CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-3jquery-plugins
Nicholas Smith
Nicholas Smith

Reputation: 11754

Rails 3 & FancyBox

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

And to add to my custom.css:

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

I then have: 

<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!

Upvotes: 1

Views: 1540

Answers (1)

Michal
Michal

Reputation: 2532

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:

  • 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();)

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!

Upvotes: 1

Related Questions